Family-finance specials
AchievementBadge
Glass-card badge with locked/unlocked states, tier dots, and an aurora glow on unlock. AchievementBadgeGrid renders a responsive layout of many.
AchievementBadge is the kit's gamified milestone primitive. Locked badges render desaturated with a small lock icon. Unlocked badges scale-pulse on first reveal, gain a glow, and animate the emoji upward in a slow loop.
Pair with <AchievementBadgeGrid> to render a responsive grid of many — KidCash uses this on each kid's profile page to surface streaks, savings milestones, and chore-counts.
Example
tsx
import { AchievementBadgeGrid, defaultBadges } from '@kidcash/ui';
<AchievementBadgeGrid
badges={defaultBadges.map((b, i) => ({ ...b, unlocked: i < 4 }))}
/>Try it live
← Back to the playground to see AchievementBadge rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.