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.
- mantle.ngrok.com - our official component documentation site (reflects latest releases)
- develop.mantle.ngrok.com - staging site for all merges to
main
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 and mantle content to your tailwind configuration.
import { createRequire } from "node:module";
import { mantlePreset, resolveMantleContentGlob } from "@ngrok/mantle/tailwind-preset";
import type { Config } from "tailwindcss";
const require = createRequire(import.meta.url);
export default {
presets: [mantlePreset],
content: [resolveMantleContentGlob(require), "./app/**/*.tsx"], // 👈 don't forget to swap out app content glob here!
// ... 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!
Please read our contribution guide.