Theme

Use the theme that matches the kit you are installing. Each kit has its own color tokens — paste them into your global CSS after running npx shadcn@latest init.

Quartz

For Quartz blocks, illustrations, and pages. Includes the full globals.css with @theme mappings, animations, and light/dark tokens.

globals.css

Veil

Warm neutral palette with light and dark mode support. Paste into app/globals.css (inside or alongside your existing @layer base):

globals.css — Veil tokens

Mist

Indigo-accented light theme. Paste into app/globals.css:

globals.css — Mist tokens

Dusk

Dusk uses the default shadcn theme with zinc as the base color. No custom CSS variables needed — set baseColor to "zinc" when you run init:

bash

In components.json:

json

Pick one kit theme

Only apply the theme for the kit you are building with. If you mix kits on the same site, use the theme of the kit that defines your primary look.

Dark mode support

Install next-themes:

bash

Create a provider component:

tsx

Wrap your root layout:

tsx

Add a theme toggle

Optional toggle for switching between light and dark themes:

tsx

Next steps

MCP — AI agent support