Primitive · CLI
Color Theme Picker
Live accent theme list — click a swatch to recolor the site. Orthogonal to light / dark.
Preview
npx shadcn@latest add @atroui/color-theme-pickerInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/color-theme-pickerSource lands in your repo. Installation · Registry
Usage
Mount beside Theme Toggle; this control only sets
data-color-theme. Selecting Tide (or another accent) appends @atroui/theme-tide to install commands on docs pages so the CLI ships those tokens with the component. Paste COLOR_THEME_BOOT_SCRIPT from @/lib/color-themes into a blocking root <script> so the stored accent applies before paint, and ship matching html[data-color-theme] presets in globals (AtroUI globals.css already has Mira / Tide / Ember / Bloom / Graphite).tsx
import { ColorThemePicker } from "@/components/ui/color-theme-picker"
<ColorThemePicker />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Extra classes on the trigger button. |
/docs/components/ui-color-theme-picker