Install on Vite

Install the kit in a Vite project.

Create project

Start with a fresh Vite app, then pick the React + TypeScript template when prompted.

Tailwind CSS

The CLI exits if Tailwind isn't installed, so set it up first.

Replace the contents of src/index.css with:

src/index.css

Path aliases

Add the @/* alias to both tsconfig files so editors and the type checker resolve imports.

Vite config

Wire the Tailwind plugin and the path alias resolver.

vite.config.ts

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 src/components/ai/message.tsx with imports rewritten to your alias. Use it:

TSX

Dark mode

The kit reads .dark on any ancestor. Toggle it on <html> from your theme code:

JS

Or render <html class="dark"> in index.html to pin dark mode on.

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

src/index.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.