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. First, install the dependencies in the repo’s directory by running 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.