Streak Counter

Pro

Streak counter with a friendly flame that grows with the streak, plus this week’s day dots. Extending the streak lights the flame up, and it rests grey until today’s goal is done.

Preview

Installation

npx @lumioui/cli add pro/streak-counter

Usage

import { StreakFlame, StreakCounter } from "@/components/ui/streak-counter/streak-counter";
<StreakCounter />

Also exported: StreakFlame.

Examples

Habits

A habit tracker's today list.

Header pill

The compact chip in a reading app's header.

Weekly

A piano-practice app's streak card.

API reference

StreakFlame

Prop Type Default
lit boolean

Lit (today done / streak alive) or idle grey. Default true.

 true
size number

Square size in pt. Default 40.

 40
count number

Streak length — sets the flame's size and heat. Omit for a full flame.

 —
face boolean

Two dot eyes. Default: on at 32pt and above.

 —
className string —

StreakCounter

Prop Type Default
count* number

Current streak length. Raising it plays the extend moment.

 —
week StreakDay[]

This week's days, oldest first. Omit to hide the dot row.

 —
active boolean

Flame lit. Defaults to today's done from week, else true.

 —
variant "card" | "row" | "pill"

"card" — hero flame + number + week row. "row" — list-row form for habit lists. "pill" — compact header chip. Default "card".

 "card"
unit string

Unit under the number. Default "day streak" (card) / "days" (row).

 —
title string

Row title (variant "row") or card subtitle line.

 —
description string

Supporting line — "Practice today to reach 13".

 —
onDayPress (index: number, day: StreakDay) => void

Tap a day dot (e.g. toggle a habit). Makes dots pressable.

 —
onPress () => void

Makes the whole counter pressable (pill → open streak screen).

 —
haptic boolean

Success haptic when the count goes up. Default true.

 true
trailing React.ReactNode

Trailing slot on the card header (freeze count, share button).

 —
accessibilityLabel string

Screen-reader label. Default "N day streak".

 —
className string —