Mantle

Mantle is ngrok’s UI library and design system that powers its front-end.

Overview

Dependencies

Mantle’s styling is composed using Tailwind. Its React components are inspired by shadcn/ui’s markup and Radix’s primitives. Its documentation is built with react-router.

Status

Mantle is a work in progress that’s currently adding components. It intends to replace new and existing ngrok user interfaces.

Mantle is available in its alpha state on NPM. It is open source and available on GitHub.

Setup

Start by installing @ngrok/mantle with your preferred package manager:

npm	`npm install -E @ngrok/mantle`
yarn	`yarn add -E @ngrok/mantle`
pnpm	`pnpm add -E @ngrok/mantle`
bun	`bun add -E @ngrok/mantle`

Tailwind Configuration

Then, add the tailwind preset and mantle content to your tailwind configuration:

tailwind.config.ts

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;

Application Scaffolding

In your application’s entry/root, import the mantle.css file to apply the mantle styles:

root.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

// 👇 add this import to your root file to apply mantle styles! 👇
import "@ngrok/mantle/mantle.css";

const container = window.document.getElementById("app");

if (!container) {
	throw new Error("Something went wrong: cannot render application! Please refresh the page to try again.");
}

const root = createRoot(container);

root.render(
	<StrictMode>
		<App />
	</StrictMode>,
);

Next, you should add the Theme Provider to your application to provide the mantle theme to your components. You are now ready to use mantle components in your application!

You are now ready to use mantle components in your application! For example, you can use the Button!