Install on React Router

Install the kit in a React Router v7 project.

Create project

Scaffold a React Router app. The v7 template ships with Tailwind and a ~/* alias for ./app/*.

If your template skips Tailwind, install it before running init. The CLI exits if Tailwind isn't installed.

Initialize

Run init to install base deps, append the token CSS, and create the cn helper.

The CLI prompts to confirm before touching any files. Pass -y to skip.

Add a component

The file lands at app/components/ai/message.tsx with imports rewritten to ~/. Use it from any route:

app/routes/home.tsx

Dark mode

Set .dark on <html> in app/root.tsx, either statically or from a theme loader:

app/root.tsx

For runtime switching, wire a session-backed theme value or use a library like remix-themes.

The kit was designed around Inter and JetBrains Mono. Add the following to app/app.css:

app/app.css

Icons (optional)

Components ship without a bundled icon library. Use any set you like. The demos on this site use lucide-react.

Skipping the CLI

Prefer to copy files by hand? See Manual setup.