@ngrok/mantle

Mantle Design System

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 react-router.

Documentation

• mantle.ngrok.com - our official component documentation site (reflects latest releases)
• develop.mantle.ngrok.com - staging site for all merges to main

Installation

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!

Contributing

Please read our contribution guide.