Install on TanStack Start

Install the kit in a TanStack Start project. The same flow works for standalone TanStack Router.

Create project

Scaffold a TanStack Start app. The CLI configures Tailwind and the @/* alias for you.

For a router-only SPA (no SSR), pass --router-only.

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 from any route:

src/routes/index.tsx

Dark mode

Set .dark on <html> in src/routes/__root.tsx, either statically or from a theme store:

src/routes/__root.tsx

The kit reads .dark from any ancestor, so a theme store paired with a useEffect toggling the class also works.

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

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