Theming

ThemeProvider

Wraps your app, exposes useTheme(), writes CSS custom properties to <html>, persists to localStorage. Required for theme-aware components.

ThemeProvider wraps your app and is the entry point for the kit's theming. It exposes useTheme() (current theme + setter), writes the active theme's CSS custom properties onto <html>, sets a data-theme-mode attribute for pure-CSS rules, and persists the user's choice to localStorage.

Every theme-aware component — GlassCard, Button, Skeleton, ProgressBar, Slider, Tooltip, Modal, Sheet — reads these CSS vars and falls back to sensible defaults if no provider is mounted.

Example

tsx

import { ThemeProvider } from '@kidcash/ui';

<ThemeProvider defaultTheme="aurora">
  <App />
</ThemeProvider>

Try it live

← Back to the playground to see ThemeProvider rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.

← Previous

CelebrationOverlay

ThemeSelector