Vertical Story Carousel: React + Tailwind Component

A stories-style vertical carousel: segmented progress bars at the top, autoplay, and tap to switch

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/vertical-story-carousel.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Time per item (ms)duration

5000

Looploop

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<VerticalStoryCarousel/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/vertical-story-carousel.en.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" and aria-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

Vertical Story Carousel