# Streak Counter

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.

> Composed · Pro · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/streak-counter
```

## Import

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

## Variants

- `habits` — Habits: `npx @lumioui/cli add pro/streak-counter-habits`
- `pill` — Header pill: `npx @lumioui/cli add pro/streak-counter-pill`
- `weekly` — Weekly: `npx @lumioui/cli add pro/streak-counter-weekly`

## Props

### StreakFlame

| Prop | Type | Notes |
| --- | --- | --- |
| `lit?` | `boolean` | Lit (today done / streak alive) or idle grey. Default true. |
| `size?` | `number` | Square size in pt. Default 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 | Notes |
| --- | --- | --- |
| `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". |
| `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. |
| `trailing?` | `React.ReactNode` | Trailing slot on the card header (freeze count, share button). |
| `accessibilityLabel?` | `string` | Screen-reader label. Default "N day streak". |
| `className?` | `string` | — |

## Icons rendered

- `check` — /icons.html?i=check

Source: https://lumioui.com/components/streak-counter