shadcn-theming

Topics in the source

• shadcn Theming
• Agent Workflow (MANDATORY)
• Overview
• Theme CLI (verified on shadcn 4.23.0)
• Critical Rules
• Architecture
• Token Hierarchy
• Validation Checklist

Design tokens and theming for shadcn/ui: CSS custom properties (--background, --primary, etc.), OKLCH wide-gamut colors, dark/light mode via the .dark class or prefers-color-scheme, and Tailwind v4 @theme directive integration — identical for the Base UI, Radix and React Aria bases. Also covers the 7 base colors, presets (init --preset, apply --preset --only theme,font), migrate base-color, shadcn/tailwind.css / eject, and shadcn/typeset for rendered markdown. Documents the token hierarchy (component → semantic → primitive OKLCH values) and the validation checklist (dark-mode overrides, chart/sidebar variables, no hard-coded hex). 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. | 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 |

This is an excerpt. Refer to the complete source and its current requirements.