# Stories Viewer

Full-screen stories that grow out of the avatar ring you tapped. They play on their own, a swipe turns to the next person on a cube, holding pauses, and swiping down flies the story back into its ring.

> Composed · Pro · Mobile-Native — React Native, Expo Go incompatible (dev build required).

## Install

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

## Import

```tsx
import { StoriesViewer } from "@/components/ui/stories-viewer/stories-viewer";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `open` | `boolean` | — |
| `onClose` | `() => void` | — |
| `onClosed?` | `() => void` | Fires once the close has fully landed (the ring can show its seen state). |
| `users?` | `StoryUser[]` | People, each with their stories, in tray order. |
| `stories?` | `Story[]` | Flat list (legacy) — consecutive stories by the same author become one person. |
| `userIndex?` | `number` | Controlled person index. |
| `defaultUserIndex?` | `number` | Uncontrolled person to open at. Default 0. |
| `onUserIndexChange?` | `(userIndex: number) => void` | — |
| `defaultIndex?` | `number` | Story to open the first person at. Default: their first unseen story. |
| `onIndexChange?` | `(storyIndex: number, userIndex: number) => void` | Fires whenever the visible story changes. |
| `onSeen?` | `(storyId: string, userId: string) => void` | Fires once per story as it is shown. |
| `origin?` | `StoriesOrigin` | The tapped ring's frame (static). Prefer `getOrigin`, which is  re-measured at close so the story lands in the CURRENT person's ring. |
| `getOrigin?` | `(userIndex: number) => StoriesOrigin | null | undefined | Promise<StoriesOrigin | null | undefined>` | Measures a person's ring (window coordinates) at open and at close. |
| `onReply?` | `(text: string, to: { userId: string` | Shows the reply field; called with the text and the story it answers. |
| `storyId` | `string }) => void` | — |
| `className?` | `string` | — |

## Icons rendered

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

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