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.

Live preview

ThemeProvider is wrapping this entire docs site. Every visual you see — backgrounds, gradients, shadows — flows from CSS variables that the active theme sets. Try the theme tiles below to see this surface change in real time.

Example

tsx

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

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

Want all 27 in one place?

The home playground shows every component side-by-side. Or install @kidcash/ui and use ThemeProvider in your own app.

← Previous

CelebrationOverlay

ThemeSelector