Foundations

GlassCard

Multi-layer translucent React card with backdrop saturation, theme-aware glow, and an opt-in hover bloom. Built on Tailwind v4 + framer-motion.

GlassCard is the surface primitive that ties the rest of the kit together. It composes a translucent background, an inset highlight, a multi-stop diagonal sheen, a radial top-right wash, and a theme-driven drop shadow into a single <div> you'd be comfortable showing a parent.

Two variants — default (40px blur) and strong (60px blur with a saturation bump) — and three glow colors give you a calm baseline that earns its glow on hover or pins it always-on for hero surfaces. Glow alphas are intentionally subtle: think ambient room light, not a spotlight.

Theme-aware: the card pulls --theme-card-bg, --theme-card-border, --theme-card-shadow from the active theme, so it reads correctly across all 9 themes without per-page tuning.

Example

tsx

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

<ThemeProvider defaultTheme="aurora">
  <GlassCard variant="strong" glow="primary">
    <h3>Saving up for a Switch</h3>
    <p>$120 of $300 — keep going.</p>
  </GlassCard>
</ThemeProvider>

Try it live

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

Button