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.
Live preview
First SaveYou added your first goal
Goal AchievedReached a savings goal
On a Streak3 deposits in a row
Big SaverSaved $100
ConsistentSaved every week for a month
Goal MasterCompleted 5 goals
HelperCompleted 10 chores
OverachieverHit a goal early
4 / 8 unlocked
Example
tsx
import { AchievementBadgeGrid, defaultBadges } from '@kidcash/ui';
<AchievementBadgeGrid
badges={defaultBadges.map((b, i) => ({ ...b, unlocked: i < 4 }))}
/>Want all 27 in one place?
The home playground shows every component side-by-side. Or install @kidcash/ui and use AchievementBadge in your own app.