127 Components
Streak Counter
MotionDuolingo-style gamified streak counter featuring a pulsing animated flame avatar with floating sparks, 7-day calendar circle row with completion checks, freeze shield, and celebratory confetti explosion.
Duolingo Gamified Streak CounterHabit Loop
Pulsing flame engine, 7-day calendar row, freeze shield, and confetti explosion
14DAYS
Practice now to lock in today's streak!
This Week5 / 7 days
M
T
W
T
F
S
S
Next Goal: 21-Day Club7 days left
Set Streak:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/streak-counter.json"
Props
TypeScript props supported by <StreakCounter />.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialStreak | number | 14 | Initial number of consecutive active days. |
| initialClaimed | boolean | false | Whether the streak has already been locked in for today. |
| hasStreakFreeze | boolean | true | Whether the user has a streak freeze equipped to protect missed days. |
| onClaim | (newStreak: number) => void | — | Callback invoked when today's streak is claimed. |
| className | string | — | Optional custom CSS classes for the container wrapper. |
Key Features
- Pulsing heat wave and floating ember sparks surrounding a rich gradient flame badge.
- Dynamic 7-day calendar circle row reflecting past completion, today's active state, and locked days.
- Radial multi-color confetti explosion upon claiming the day's streak.
- Milestone progress indicator tracking user progression to subsequent tier badges (e.g. 21-Day Club).
- Interactive streak freeze shield badge communicating protection against broken streaks.
- Live controls to inspect different streak counts and reset demonstration states.
Keyboard & Accessibility
- Semantic buttons with full state descriptions (claimed vs pending).
- High contrast status badges communicating completed and locked days.
- Animations respect prefers-reduced-motion for reduced motion users.