@ngrok/mantle

Mantle

Mantle is ngrok’s UI library and design system. It’s inspired by shadcn/ui and uses Radix with Tailwind for styling. It’s documented using Remix.

Get Started

To get started, install @ngrok/mantle with your preferred package manager:

package manager	command
npm	npm install -E @ngrok/mantle
yarn	yarn add -E @ngrok/mantle
pnpm	pnpm add -E @ngrok/mantle
bun	bun add -E @ngrok/mantle

Then, add the preset to your tailwind configuration.

import { mantlePreset } from "@ngrok/mantle/tailwind-preset";
import type { Config } from "tailwindcss";

export default {
	presets: [mantlePreset],
	// ... the rest of your tailwind config!
} satisfies Config;

Next, check out the Overview & Setup and Theme Provider usage docs and start using mantle components in your application!

Development

Installation

Mantle uses bun as its package manager and direnv to assist you with managing the bun version.

First, install direnv:

OS	command
macOS	brew install direnv
ubuntu	sudo apt install direnv

For all other OSes, see the direnv installation guide.

Next, run

direnv allow

This will install bun if it's not already installed and then update to the latest version.

Finally, install all of node module dependencies in the repo’s directory:

bun install

Local Development

Run bun run docs:dev to run Remix's development mode, rebuilding assets on file changes.

Open up http://localhost:3000 and you should be ready to go!

Production Deployment

We use GitHub Actions to deploy our production site to vercel and publish to npm.