Theming
ThemeSelector
A 3×3 grid of theme cards with preview-color dots, label, description, and a light/dark mode badge per tile. Click to switch.
ThemeSelector is the 3×3 picker grid. Each tile shows four preview-color dots, the theme's label and description, and a light/dark mode badge so users can spot the surface tone at a glance. Clicking a tile fires setThemeName from the surrounding <ThemeProvider> — instant switch with persistence baked in.
Live preview
Pick a theme
Your choice persists in localStorage.
Example
tsx
import { ThemeProvider, ThemeSelector } from '@kidcash/ui';
<ThemeProvider defaultTheme="aurora">
<ThemeSelector
title="Theme"
description="Pick a vibe — your choice persists."
/>
</ThemeProvider>Want all 27 in one place?
The home playground shows every component side-by-side. Or install @kidcash/ui and use ThemeSelector in your own app.