# Stories Progress

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.

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

## Install

```bash
npx @lumioui/cli add pro/stories-progress
```

## Import

```tsx
import { StoriesProgress } from "@/components/ui/stories-progress/stories-progress";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `segments` | `number` | Segment count. |
| `activeIndex?` | `number` | Controlled active index. Omit for uncontrolled via `defaultIndex`. |
| `defaultIndex?` | `number` | Uncontrolled initial index. Default 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. |
| `paused?` | `boolean` | Freeze the active segment's fill (long-press hold, open sheet). |
| `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. |
| `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`. |
| `fillClassName?` | `string` | Fill classes — pass a white bar over media. Default `bg-foreground`. |

Source: https://lumioui.com/components/stories-progress