Three appearance controls — a light/dark/system segmented switch with a sliding thumb, an appearance card with live mini previews, and an accent and density picker — that report changes without touching your site.
themedark modelight modeappearanceaccentdensitysegmented controlsettings
Segmented
segmented.tsxLight, dark and system options with a thumb that slides between them and an icon that turns as it lands; text or icon-only.
$npx shadcn@latest add @geturui/theme-switchers-segmented
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue | "light" | "dark" | "system" | "system" | Controlled or initial choice. |
onChange | (theme: ThemeChoice) => void | — | Fires with the new choice. |
iconOnly | boolean | false | Hide labels for toolbars. |
size | "sm" | "md" | "md" | Control height. |
className | string | — | Extra classes on the root element. |
Appearance card
appearance-card.tsxTheme cards with tiny app windows drawn in each theme's real tokens, a check that pops onto the chosen one and a stepped text-size slider.
$npx shadcn@latest add @geturui/theme-switchers-appearance-card
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | { theme; textSize } | dark, 100 | Initial theme and text size in percent. |
onChange | (value: AppearanceSettings) => void | — | Fires with every change. |
className | string | — | Extra classes on the root element. |
Accent and density
accent-density.tsxAccent swatches and a density control beside a live preview whose rows re-space with a layout spring and repaint in the chosen accent.
$npx shadcn@latest add @geturui/theme-switchers-accent-density
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | { accent; density } | volt, default | Initial accent and density. |
onChange | (value: AccentDensityValue) => void | — | Fires with every change; only the preview updates. |
className | string | — | Extra classes on the root element. |
Install the whole set
Installs every theme switchers variant at once. Each section above has its own command for a single variant.
$npx shadcn@latest add @geturui/theme-switchers
Accessibility
- Every control is a radiogroup with one tab stop; arrow keys move and select, Home and End jump to the ends.
- The text size slider is a native range input with a spoken percentage.
- Choices only change local state and fire onChange, so nothing on the host page shifts unexpectedly; motion reduces to fades.