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.
Example
tsx
import { ThemeProvider, ThemeSelector } from '@kidcash/ui';
<ThemeProvider defaultTheme="aurora">
<ThemeSelector
title="Theme"
description="Pick a vibe — your choice persists."
/>
</ThemeProvider>Try it live
← Back to the playground to see ThemeSelector rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.