Manual installation

Add components by hand if you can't use the CLI.

Tailwind CSS

The kit styles itself with Tailwind utilities and CSS variables. Make sure Tailwind is installed before you start. If you don't have it yet, follow the Tailwind installation guide for your bundler.

Dependencies

Install the packages every kit component relies on.

Base UI powers the interactive parts like collapsibles, popovers, and scroll areas. class-variance-authority drives visual variants. clsx and tailwind-merge back the cn helper.

Some components have their own extras. The Code Block uses react-shiki for syntax highlighting. The Message family pairs with react-markdown for streamed prose. The rich Composer is built on @tiptap/react and its starter kit. Install these only when you pull in the component that needs them.

Path Aliases

The kit imports its utility helper with @/lib/utils. Add the alias to tsconfig.json:

React Router projects conventionally use ~/* instead of @/*. Pick the prefix that fits your bundler, then update the imports in the files you copy in to match.

Utility

The kit relies on a single cn helper to merge Tailwind classes. Create it at src/lib/utils.ts:

Every component imports cn from this file. If you move it, update the import paths to match.

Theme Tokens

Components style themselves with CSS variables. Names match the shadcn and Selia conventions, so an existing theme will drop in unchanged. Add the following to your global stylesheet:

The @theme block exposes the variables to Tailwind so utilities like bg-background and text-foreground resolve correctly. To retune the kit, override the variables in :root or .dark. Every component rounds with rounded-md, so changing --radius once reshapes the whole kit.

Add a Component

With the setup in place, copy any component you want into your project. Open the source for the part you need from the sidebar, drop the file into src/components/ai/, and import it from your app:

The file lives in your repo from that point on. Edit it, rename parts, or strip out the bits you don't need. There is no package to update, and no upstream to fight when your design changes.

Font family (recommended)

The kit was designed around Inter and JetBrains Mono. Add the following to your global stylesheet:

Icons (optional)

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

What's next

Browse the sidebar to pick the first component you want to bring in. Each page lists the parts, runnable demos, and a copy-as-markdown button so you can paste the docs into a model and have it scaffold the wiring for you.