Story Viewer
Stories-style slides with segmented progress bars on top: tap sides to skip, press and hold to pause.
story-viewer.tsxstory-viewer.css
Checking access…
Overview
Each slide has a segment that fills over its duration, then the next begins. Tap the right third to skip ahead, the left third to go back, and hold anywhere to pause.
Arrow keys and Space mirror the gestures. Works for changelogs, onboarding tips and product tours as well as social stories.
When to use
- Release notes, feature spotlights, short onboarding.
When not to use
- Content people need to read at their own pace.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/story-viewer.json$
npx shadcn@latest add https://sundaeui.dev/r/story-viewer.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/story-viewer.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/story-viewer.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy story-viewer.tsx and story-viewer.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { StoryViewer } from '@/components/sundae/story-viewer'
<StoryViewer />Props
| Prop | Type | Default |
|---|---|---|
slides*Slides. | { id: string; title: string; body: string }[] | — |
durationms per slide. | number | 4000 |
onEndCalled after the last slide. | () => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- A region with aria-roledescription="carousel"; each slide announces its position.
- Pause on hold, focus and reduced motion (auto-advance stops).
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-sty; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ← / →
- Previous / next
- Space
- Pause / resume
FAQ
- Is Story Viewer free?
- Story Viewer is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Story Viewer?
- Run npx shadcn@latest add https://sundaeui.dev/r/story-viewer.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Story Viewer support keyboard and screen readers?
- A region with aria-roledescription="carousel"; each slide announces its position. Pause on hold, focus and reduced motion (auto-advance stops).
- Does Story Viewer respect reduced motion?
- Pause on hold, focus and reduced motion (auto-advance stops).
More like this
All components →Setup Checklist
Components · UnderstatedDownload Button
Components · Refined- Pro
Feature Tour
Components · Refined Permission Prompt
Components · RefinedToast Stack
Components · Refined- Pro
Sheet Drawer
Components · Refined