Streak Badge

The Streak Badge is a compact building block for streak gamification UI in React. Display current streak length, embed optional flame or custom icons, and control layout for habit tracking and engagement gamification flows. Compose with Streak Card or Streak Calendar when you need streak gamification UI at scale.

Installation

npx shadcn@latest add https://ui.trophy.so/streak-badge

Usage

Import the component:

import { StreakBadge } from "@/components/ui/streak-badge"

Basic usage with a streak length:

Examples

Basic Usage

<StreakBadge length={7} />

Sizes

Available in three sizes: sm, default, and lg.

With Trophy

Use the Trophy SDK to fetch streak data for a particular user 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 response fields into StreakBadge in your UI layer:

<StreakBadge length={response.length} frequency={response.frequency} />

API Reference

Props

Types

interface StreakResponse {
  length: number
  frequency: "daily" | "weekly" | "monthly"
}