Stories Progress

Pro

Segmented progress bar for stories that advances on its own. It pauses and resumes when your app says so, can take taps to jump between segments, and lets each segment run for its own length.

Preview

Installation

npx @lumioui/cli add pro/stories-progress

Usage

import { StoriesProgress } from "@/components/ui/stories-progress/stories-progress";
<StoriesProgress />

API reference

Prop Type Default
segments* number

Segment count.

 —
activeIndex number

Controlled active index. Omit for uncontrolled via defaultIndex.

 —
defaultIndex number

Uncontrolled initial index. Default 0.

 0
onIndexChange (index: number) => void

Index change intent — auto-advance and tap navigation both report here.

 —
duration number | number[]

Milliseconds per segment — one number, or a per-segment array. Content data (like video length), so it intentionally bypasses the timing tokens. Default 5000.

 DEFAULT_DURATION
paused boolean

Freeze the active segment's fill (long-press hold, open sheet).

 false
dimOnPause boolean

While paused the bar dims away (120ms) so the content holds the screen; on release the light returns first, then the fill resumes. Default true.

 true
onSegmentEnd (index: number) => void

A segment completed naturally — fires before the auto-advance.

 —
onFinish () => void

The last segment finished.

 —
onPressSegment (index: number) => void

When set, invisible left/right tap halves over the row navigate — called with the target index (may be out of range — signal to close).

 —
className string

Extra classes on the outer container.

 —
trackClassName string

Track (unfilled) segment classes. Height lives here too — override for a chunkier bar. Default bg-foreground/20.

 "bg-foreground/20"
fillClassName string

Fill classes — pass a white bar over media. Default bg-foreground.

 "bg-foreground"