Family-finance specials

BirthdayCountdown

Three states (future, today, past) with an animated gradient on the live count and a celebratory state for "today". Built for birthdays, but works for any date.

BirthdayCountdown is the playful "days until" widget the kit was built for. Three states: future shows an animated gradient over the day count and a small floating decoration emoji; today celebrates with a special layout; past shows "X days since" in a muted tone.

Although the default styling reads as a kid's birthday widget, the component is generic — point it at any future date for "days until summer break", "days until the trip", "days until our family savings goal".

Example

tsx

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

<BirthdayCountdown
  date={new Date('2026-08-15')}
  label="Birthday"
  decorationEmoji="🎂"
/>

Try it live

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

← Previous

BackToTop

AchievementBadge