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 in Remix.
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:
Package Manager | Command |
---|---|
npm |
|
yarn |
|
pnpm |
|
bun |
|
Tailwind Configuration
Then, add the tailwind 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;
Application Scaffolding
In your application’s entry/root, import the mantle.css
file to apply the mantle styles:
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(
,
);
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!