Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

App Screenshots Carousel Block for React Aria

A six-screen product tour of drawn app screens with captions and numbered buttons that carry the timer, a Stay choice of Slow, Normal or Fast that changes the running dwell, and a Pause toggle that comes first and holds on hover and focus.

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

Show an app in six screens that play themselves, with this app screenshots carousel for React with React Aria. Chargeleaf, an invoicing app, tours an inbox, an invoice list, a report, settings, a phone view and an empty state. The screens are drawn in greys, not photographs and not browser frames. A control band comes first: a Pause tour Toggle and a Segment Group "Stay: Slow 8 s, Normal 5 s, Fast 3 s" that changes the running timer at once. Beside the stage the captions give the screen's title and three bullets above six numbered buttons ("Screen 3: Reports"), the current one carrying the timer, a bar that fills over the dwell. The tour wraps; pausing, hovering the panel or putting keyboard focus in it holds the bar, and under reduced motion it never starts, so use the numbers. On a phone the stage comes first and the captions follow. The ruled bands come from Guides. It is built from Carousel, Toggle, Segment Group, Button and Guides, with CSS transitions only. The screens are drawn and the product is made up.

FAQ

How do I use my own screens?

Edit SCREENS: an id, a title, three bullets, a sentence for screen readers in drawn and a kind for the drawing. To show real screenshots, replace the drawing component with an image and keep the drawn sentence as its alt text.

How does Stay change the timer?

The three choices set one CSS variable, --dwell, on the panel, and the timer bar reads it for its duration. The change reaches the bar that is already running without re-rendering the track. Embla follows the same page through its select event.

How does it work with a keyboard?

Tab reaches Pause, the Stay choice, the numbered buttons and Previous and Next. With focus inside the stage the arrow keys move a screen (mirrored in a right-to-left page) and Home and End jump to the ends. Screens out of view are hidden from the tab order and from screen readers.

What happens with reduced motion?

The bar is not drawn, so the tour never starts by itself, the Pause toggle is hidden and the numbered buttons and arrows do the work.

What stays local in the demo?

Everything. The screens are drawings, nothing is fetched and the product is made up. To wire it for real, swap the drawings for your screenshots, write real captions, and keep the pause and reduced-motion behaviour.

How does it look on a phone?

The stage comes first in the page with the captions under it. The numbered buttons stay in a list, and the first line of the foot holds the status and the arrows.

All 100 carousel blocks