Stories Viewer

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/stories-viewer

Usage

import { StoriesViewer } from "@/components/ui/stories-viewer/stories-viewer";
<StoriesViewer />

API reference

Prop Type Default
open* boolean —
onClose* () => void —
storyId* string }) => 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.

 0
onUserIndexChange (userIndex: number) => void —
defaultIndex number

Story to open the first person at. Default: their first unseen story.

 —
onIndexChange
(storyIndex: number … (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 … (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.

 —
className string —