Streak Card
Full streak UI card for React. Daily streak display, longest streak record with optional section for streak rules. Built on shadcn/ui + Tailwind. Open source.
The Streak Card is a full streak gamification surface for React, composed of Streak Calendar and Streak Badge. Display daily streak, longest streak record, and optional streak rules—ideal for fitness, productivity, and other habit gamification experiences.
Streak
16days
Longest Streak
100days
Total
131
Complete at least one activity each day to build your streak.
Each day you do an activity, your streak increases.
Missing a day will reset your streak to 0.
Installation
npx shadcn@latest add https://ui.trophy.so/streak-cardUsage
Import the component:
import { StreakCard } from "@/components/ui/streak-card"Examples
Basic Usage
Streak
16days
Longest Streak
100days
Total
131
Complete at least one activity each day to build your streak.
Each day you do an activity, your streak increases.
Missing a day will reset your streak to 0.
const streak = [
{ periodStart: "2024-01-01", periodEnd: "2024-01-01" },
{ periodStart: "2024-01-02", periodEnd: "2024-01-02" },
{ periodStart: "2024-01-03", periodEnd: "2024-01-03" },
]
<StreakCard
streak={streak}
currentStreak={16}
longestStreak={100}
total={131}
defaultHowItWorksOpen
/>With Trophy
Use the Trophy SDK to fetch streak data server-side:
import { TrophyApiClient } from '@trophyso/node';
const trophy = new TrophyApiClient({
apiKey: 'YOUR_API_KEY'
});
const response = await trophy.users.streak("user-id", {
historyPeriods: 14
});
Then pass and aggregate the response into StreakCard props in your UI layer:
const streakPeriods = response.streakHistory ?? []
const currentStreak = response.length
const longestStreak = Math.max(
currentStreak,
...streakPeriods.map((period) => period.length ?? 0)
)
const totalActivePeriods = streakPeriods.filter(
(period) => (period.length ?? 0) > 0
).length
<StreakCard
streak={streakPeriods}
currentStreak={currentStreak}
longestStreak={longestStreak}
total={totalActivePeriods}
/>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
streak | StreakPeriod[] | Required | Streak periods used by the embedded week calendar |
currentStreak | number | Required | Current streak in days |
longestStreak | number | Required | Longest streak in days |
total | number | Required | Secondary total metric value |
title | string | "Streak" | Card heading |
actionLabel | string | "View Details" | Text for the top-right action button |
onActionClick | () => void | - | Callback for action button |
showHowItWorks | boolean | true | Show the bottom "How streaks work" dropdown |
howItWorksTitle | string | "How do streaks work?" | Dropdown trigger title |
howItWorksItems | string[] | Built-in defaults | Rows rendered in the expanded panel |
defaultHowItWorksOpen | boolean | false | Initial open state of dropdown |