Family-finance specials

CelebrationOverlay

Heavy glass-strong backdrop, big bouncy emoji, animated-gradient title, confetti burst. The "you reached your savings goal" surface.

CelebrationOverlay is the all-in-one celebration moment. Heavy glass-strong backdrop, oversized bouncy emoji, animated-gradient title, confetti burst on open. Pass a custom emoji, title, subtitle, and optional CTA — the component handles the rest.

Live preview

Example

tsx

import { CelebrationOverlay, Button } from '@kidcash/ui';

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>🎉 Celebrate</Button>
<CelebrationOverlay
  open={open}
  onClose={() => setOpen(false)}
  emoji="🏆"
  title="Goal reached!"
  subtitle="You saved $300 for your bike."
/>

Want all 27 in one place?

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

← Previous

AchievementBadge

ThemeProvider