StreakTracker
Pill-shaped streak tracker with animated flame icon, progress bar, and daily streak stats. Perfect for gamification, habit tracking, and engagement dashboards.
Preview
STREAK
16DAYSRECORD: 6
DAYS
0%16/31
Adjust days:16
Usage
STREAK
16DAYSRECORD: 6
DAYS
0%16/31
Custom Color
STREAK
42DAYSRECORD: 12
DAYS
0%42/90
Minimal (No Animation)
STREAK
7DAYSRECORD: 3
DAYS
0%7/30
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| currentDays | number | — | Current streak count |
| totalDays | number | — | Total days in the period |
| record | number | — | All-time streak record |
| label | string | "STREAK" | Left section label |
| daysLabel | string | "DAYS" | Label for days |
| percentage | number | computed | Override percentage display (auto-calculated if omitted) |
| showFlame | boolean | true | Show/hide flame icon |
| flameSize | number | 40 | Flame icon size in px |
| animate | boolean | true | Enable entrance and progress animations |
| color | string | "#22c55e" | Progress bar and percentage color |