Story viewer
ProShort updates one at a time: bars fill as each plays, taps go back or on, holding pauses, and there is always a pause button.
pnpm dlx shadcn@latest add @caliper/story-viewerOctober
Payments match in any currency
Using the day's rate, with the difference booked for you.
Story 1 of 3: Any-currency matching
When to use #
Use it for
- Product updates, onboarding tips and highlights on phones.
- A handful of visual moments in sequence.
Skip it when
- Information people need to read at their pace; use a page.
Installation #
pnpm dlx shadcn@latest add @caliper/story-viewer
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source.
import { StoryViewer } from "@/components/ui/story-viewer"
The worked example comes with Pro
The 30-line example behind the preview opens here with a Pro or Team licence.
API reference #
StoryViewer
component
Accessibility #
It is built on native elements and keeps aria-roledescription, aria-label, aria-hidden, aria-pressed and aria-live in step with state. Changes that matter are announced through a live region.
Motion #
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.