Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Stories Viewer Team Block for Ark UI

Five teammates of a crop-planning app as a stories viewer: five segments that fill in turn, one sentence at a time in large type, a visible Pause, Previous and Next buttons, arrow keys and swipe.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A team section for React with Ark UI, for Fieldmouse, a crop-planning app. A framed viewer holds one sentence from one teammate at a time, in large type with their initials avatar, name and role, under five segments. The filling segment is the timer: when it is full the next story slides in, so a Pause toggle can never fall out of step with the story. Previous and Next buttons, the arrow keys, a swipe and a tap on any segment move by hand. It never starts by itself under reduced motion; the toggle then starts it. On a phone the heading comes first, then the viewer, then the controls; from lg the viewer sits at the start. It's built from Carousel, Avatar, Button, Toggle and Guides, with CSS animation and your theme's tokens for every colour. These are example quotes: swap in your own team's. The block shows no video or audio.

FAQ

How does it advance by itself?

The filling segment is a bar that slides in over seven seconds with a CSS animation; when the animation ends, the next story is shown. There is no timer in script. Pausing stops the animation, so a paused story keeps the fill where it was and resumes from there. Change the duration in FILL (--tw-animation-duration:7s) and in the copy.

How do I pause it, and what happens under reduced motion?

The Pause stories toggle sits in the controls row, under the viewer on a phone and under the heading from lg; it reports whether it is pressed. With reduced motion the toggle starts pressed and the stories do not advance until a visitor presses it, because moving content they asked not to have is theirs to start.

How do I use it with a keyboard?

Tab goes to the five segments, then (on Ark UI, Vue, Svelte and Solid) the viewer itself, then Previous, Next and the toggle. The Left and Right arrows (reversed on a right-to-left page) move between stories from the viewer or from either button. A story is read out when you move by hand, never when the timer does.

How do I change the stories?

Edit STORIES at the top of the file: an id, a name, a role and one sentence in quote. Keep a quote under about 110 characters, since the slides are a fixed height; the segments, the counter and the loop follow the array.

How does it fit on a phone?

The viewer is full width with the segments across its top, and the controls sit under it on one line. The slide height is fixed, so nothing moves when the story changes.

All 126 team blocks