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 and all of the required peerDependencies with your preferred package manager:

package manager	command
npm	npm install -E @ngrok/mantle @phosphor-icons/react date-fns
pnpm	pnpm add -E @ngrok/mantle @phosphor-icons/react date-fns
bun	bun add -E @ngrok/mantle @phosphor-icons/react date-fns
yarn	yarn add -E @ngrok/mantle @phosphor-icons/react date-fns

Also install the required devDependencies:

package manager	command
npm	npm install -DE tailwindcss
pnpm	pnpm add -DE tailwindcss
bun	bun add -DE tailwindcss
yarn	yarn add -DE tailwindcss

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

Code Block Tooling

Mantle ships runtime components from @ngrok/mantle, while build-time and server-side tooling lives in @ngrok/mantle-vite-plugins:

• @ngrok/mantle/code-block: runtime React components and mantleCode template tag
• @ngrok/mantle-vite-plugins: Vite + rehype integration via mantleCodeBlockPlugins()
• @ngrok/mantle-server-syntax-highlighter: server-side highlighting engine for API routes/actions

This keeps Vite/Shiki/parser dependencies out of frontend installs that only need Mantle's runtime UI package.

For a concrete service implementation, see apps/highlight-server, a Bun + Hono syntax-highlighting API that preloads Shiki and serves highlighted HTML for server-side use cases.

Vite + MDX

import { mantleCodeBlockPlugins } from "@ngrok/mantle-vite-plugins";

const codeBlockPlugins = mantleCodeBlockPlugins();

Server Highlighter

import { createMantleServerSyntaxHighlighter } from "@ngrok/mantle-server-syntax-highlighter";

const highlighter = createMantleServerSyntaxHighlighter();
const result = await highlighter.highlight({
	code: "const x = 1",
	language: "typescript",
});

Git Hooks

Pre-commit hooks run automatically via husky and lint-staged. On every commit, staged files are formatted with oxfmt and linted with oxlint.

Opting Out

If you need to skip the pre-commit hook locally (e.g., WIP commits, rebasing), set the SKIP_HOOKS env var:

SKIP_HOOKS=1 git commit -m "wip"

Note

This is a local opt-out only. CI will always run formatting and linting checks against your branch, so any issues will still be caught before merge.

Contributing

Please read our contribution guide and conventions.