Streak Badge

A compact streak counter for daily, weekly, monthly or yearly runs.

Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/streak-badge.json
Usage
Import the StreakBadge and pass a length and frequency.
TSImport
import { StreakBadge } from "@/components/ui/streak-badge";
TSExample
import { StreakBadge } from "@/components/ui/streak-badge"

export function Example() {
  return <StreakBadge length={7} frequency="daily" size="sm" />
}
Composition
Anatomy of the StreakBadge.
<StreakBadge
  length={7}                    // the run
  frequency="daily"             // daily | weekly | monthly | yearly — the unit
  size="sm"                     // xs (one-line pill) | sm | default | lg
  tone="default"                // default | coral
  subtitle="streak"             // the line under the count
  icon={<FireIcon />}           // replaces the flame
/>

  ┌──────────┐
  │   🔥     │  icon (Phosphor FireIcon, duotone, text-primary)
  │  7 days  │  length + unit (pluralised)
  │  streak  │  subtitle
  └──────────┘
Default
A seven-day streak at the default size.
Sizes
Four sizes: `xs` (a one-line pill), `sm`, `default` and `lg`.
Frequencies
`frequency` sets the unit — day, week, month or year — pluralised by `length`.
Coral
`tone="coral"` tints the badge in the brand coral.
Custom subtitle
`subtitle` replaces "streak" — here, a tenure counted in years.
API Reference
Props exposed by the StreakBadge component.
PropTypeDefaultDescription
lengthnumber0Streak length value.
frequency"daily" | "weekly" | "monthly" | "yearly""daily"What one step of the streak is; drives the unit label (day, week, month, year).
size"xs" | "sm" | "default" | "lg""default"Badge size. `xs` is a one-line pill (flame, count, short unit) with no subtitle line.
tone"default" | "coral""default"Colour. `coral` tints the border, fill, flame and count.
subtitlestring"streak"The line under the count.
iconReactNode—Custom icon to replace the flame.
classNamestring—Class names forwarded to the badge.