@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 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!

Contributing

Please read our contribution guide.