Customization
ThemeCustomizer
Interactive hue slider with live preview tiles and a paste-ready @theme export. Powers the /themes route in both editions.
Usage
Pick your edition with the tabs. Selection syncs across all docs.
tsx
import { ThemeCustomizer } from '@/components/organisms'
<ThemeCustomizer
defaultHue={280}
onChange={(hue) => updateRootHue(hue)}
onExport={(themeBlock) => navigator.clipboard.writeText(themeBlock)}
/>Props
Same surface in both editions; HTML version exposes equivalents through Alpine x-data.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultHue | number | 280 | Starting hue (0–359). |
| onChange | (hue: number) => void | — | Called every time the slider moves. |
| onExport | (themeBlock: string) => void | — | Called when the user copies the @theme block. |
Accessibility
role
Slider uses native <input type='range'>, fully keyboard-accessible.
live
The exported @theme block updates inside an aria-live region.