Streak Counter: Duolingo-Style Flame for React (Free)

A Duolingo-style streak flame — the flame flares when the number goes up and changes color at milestones

Layered SVG flames flicker continuously; when the day count goes +1 the flame flares up, sparks scatter upward, and the number flips up like a split-flap. On reaching a milestone (7 / 30 / 100 by default) the flame shifts to a new color ramp and a rotating halo appears — a good fit for check-in, learning, fitness, and other streak-tracking scenarios.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add streak-flame-counter.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Day streakcount

Flame sizesize

120

Unit textunit

Descriptioncaption

Show milestone progressshowProgress

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<StreakFlameCounter/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/streak-flame-counter.en.json

Or, once registries are configured in components.json, install it as @webberui/streak-flame-counter.

Usage

import { StreakFlameCounter } from "@/components/ui/streak-flame-counter";

const [count, setCount] = useState(5);

<StreakFlameCounter count={count} milestones={[7, 30, 100]} />
<button onClick={() => setCount((c) => c + 1)}>+1 day</button>

Props

Prop	Type	Default	Description
`count`	`number`	—	The current streak in days; increasing it triggers the flare and the flip
`milestones`	`number[]`	`[7, 30, 100]`	Milestone thresholds; reaching one shifts the flame's color ramp and brings up the halo
`unit`	`string`	`"days"`	Unit text after the number (the built-in default is the Chinese word for days)
`caption`	`string`	`"Streak"`	Caption text below the number (the built-in default is Chinese for "streak")
`size`	`number`	`120`	Flame width (px); the height is derived proportionally
`showProgress`	`boolean`	`true`	Whether to show a progress bar toward the next milestone
`className`	`string`	—	Forwarded to the outer container

Accessibility

When the user has "reduce motion" enabled at the system level, the flame neither flickers nor flares and the number updates directly without flipping
The day count is read out in full through hidden text with role="status" and aria-live="polite", while the flipping number is hidden from assistive technology
Purely decorative layers such as the flame, the halo, and the sparks are all marked aria-hidden
Milestone progress is presented as text ("N days to go"), and the progress bar itself is decorative and aria-hidden

Streak Flame Counter