Vertical Story Carousel
A stories-style vertical carousel: segmented progress bars at the top, autoplay, and tap to switch
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
A stories-style 9:16 vertical carousel card: the segmented progress bars at the top advance automatically, tapping the left half goes back one story and the right half moves to the next, and pressing and holding anywhere pauses playback. The scenes are built from gradients and emoji, so no external images are needed.
npx shadcn@latest add "https://webberui.com/r/vertical-story-carousel.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<VerticalStoryCarousel />
Installation
npx shadcn@latest add "https://webberui.com/r/vertical-story-carousel.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/vertical-story-carousel.
Usage
import { VerticalStoryCarousel } from "@/components/ui/vertical-story-carousel";
<VerticalStoryCarousel
duration={4000}
stories={[
{ tag: "Weekend inspiration", emoji: "🏔️", title: "Hehuanshan at dawn", description: "Waiting on a sunrise." },
{ tag: "Weekend inspiration", emoji: "🌊", title: "The east coast highway", description: "Blue all the way south." },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
stories | StoryItem[] | — | The list of stories, played automatically in order |
duration | number | 5000 | How long each story plays (milliseconds) |
loop | boolean | true | Whether to return to the first story and loop again after the last one |
className | string | — | Forwarded to the outermost 9:16 card container |
StoryItem fields:
| Field | Type | Default | Description |
|---|---|---|---|
title | string | — | The story's main title, shown at the bottom of the card |
description | string | — | Supporting copy, shown below the title |
gradient | string | built-in gradient | Scene gradient (a CSS background-image value) |
emoji | string | — | Emoji decoration in the center of the scene, floating slowly up and down |
tag | string | — | Small label in the top-left corner, such as an account name or a category |
Accessibility
- When the user has "reduce motion" enabled at the system level, the transitions and the floating animation are turned off, and the current progress bar simply shows as statically full
- The container is focusable (
tabIndex={0}) and supports keyboard operation: the arrow keys switch to the previous / next story, and the space bar pauses / resumes - Carousel semantics are marked with
role="group"andaria-roledescription="carousel", with the total number of stories stated - Switching stories announces "story X of Y: title" through
aria-live="polite" - The decorative glow and the emoji are both marked
aria-hidden, so they do not interfere with the screen reader