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.

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."
/>

Try it live

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

← Previous

AchievementBadge

ThemeProvider