shadcn-theming

Documents the token hierarchy (component → semantic → primitive OKLCH values) and the validation checklist (dark-mode overrides, chart/sidebar variables, no hard-coded hex).

shadcn Theming

Agent Workflow (MANDATORY)

Before theming work, spawn agents in parallel, one Agent call each with a name:

1. fuse-ai-pilot:explore-codebase - Find existing theme tokens
2. fuse-ai-pilot:research-expert - Verify OKLCH patterns via Context7

After: Run fuse-ai-pilot:sniper for validation.

Overview

Feature	Description
CSS Variables	--background, --foreground, --primary
OKLCH Colors	Wide-gamut P3 color space
Dark Mode	.dark class or prefers-color-scheme
Tailwind v4	@theme inline directive integration + @custom-variant dark
Base colors	tailwind.baseColor: neutral, stone, zinc, mauve, olive, mist, taupe (set at init; switch with migrate base-color --to <c>)
Presets	Short code bundling style, base color, theme, chart color, icons, fonts, radius, menu color/accent (build on ui.shadcn.com/create)
Radius scale	--radius drives --radius-sm ... --radius-4xl via @theme inline

Theme CLI (verified on shadcn 4.21.0)

{runner} shadcn@latest init --preset <code>                 # new project from a preset
{runner} shadcn@latest apply --preset <code>                # switch preset: reinstalls components, keeps base + RTL
{runner} shadcn@latest apply --preset <code> --only theme   # or --only font, --only theme,font
{runner} shadcn@latest preset decode <code>                 # also: resolve (current project), url, open
{runner} shadcn@latest migrate base-color --to zinc --yes   # rewrite theme CSS vars + baseColor
{runner} shadcn@latest init --no-css-variables              # inline utilities instead of tokens (install-time only)
{runner} shadcn@latest init --pointer                       # cursor: pointer on buttons (not part of presets)
{runner} shadcn@latest eject                                # inline shadcn/tailwind.css, drop the shadcn dependency

Critical Rules

1. ALWAYS use OKLCH color space for all tokens
2. ALWAYS define dark mode overrides for every token
3. NEVER hard-code hex or rgb in components
4. USE @theme inline directive for Tailwind v4 integration
5. MAP semantic tokens to primitive OKLCH values

Architecture

app/
├── globals.css         # :root + .dark token definitions
└── tailwind.config.ts  # Optional (v3) or @theme (v4)

-> See theme-setup.md for complete theme

Token Hierarchy

Component: --card, --card-foreground, --button-*
    ↑
Semantic: --primary, --secondary, --accent, --muted
    ↑
Primitive: oklch(55% 0.20 260), oklch(98% 0.01 260)

Validation Checklist

[ ] CSS variables defined in :root
[ ] Dark mode overrides in .dark
[ ] OKLCH color space used
[ ] Chart variables (--chart-1 to --chart-5)
[ ] Sidebar variables if applicable
[ ] New tokens defined in :root + .dark AND exposed in @theme inline (--color-*)
[ ] No hard-coded hex in components

Best Practices

DO

• Use OKLCH for all colors
• Define semantic tokens mapped to primitives
• Provide dark mode overrides for all tokens
• Use @theme inline for Tailwind v4 integration

DON'T

• Hard-code hex or rgb values
• Skip dark mode definitions
• Mix color spaces (hex + oklch)
• Define tokens only in Tailwind config

Reference Guide

Concepts

Topic	Reference	When to Consult
Theming Guide	theming-guide.md	CSS variables, OKLCH, base colors, new tokens, typeset

Templates

Template	When to Use
theme-setup.md	Complete theme configuration