Install on Next.js

Install the kit in a Next.js project (App Router).

Create project

Scaffold a Next.js project. The --yes flag accepts the defaults, which include TypeScript, Tailwind, App Router, and the @/* alias.

If you opted out of Tailwind during setup, add 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 components/ai/message.tsx with imports rewritten to your alias. Use it from a server or client component:

app/page.tsx

Dark mode

next-themes is the simplest way. Wrap your app/layout.tsx with the provider and set the class attribute on <html>:

app/layout.tsx

The kit picks up .dark from any ancestor.

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

app/globals.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.