Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

How It Works Carousel Block for React Aria

Four setup steps (Connect, Configure, Automate, Monitor) on a one-up track, each with a large number, an icon, a sentence and a small drawing, followed by a read-only Steps list.

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

Explain a product in four steps with this how it works carousel for React with React Aria. Flowmill, a workflow runner, walks through Connect, Configure, Automate and Monitor, one step per slide: a large step number, an icon, a sentence and a small drawing of the idea. Above the track the catalog Steps list shows where you are, with the step in view marked as current and earlier steps as done. The list is a readout, not a control: the dots, the Previous and Next Buttons, a swipe and the arrow keys move the track, and the list follows. On a phone the Steps show their numbers only and the names are kept for screen readers. The ruled bands come from Guides. It's built from Carousel, Steps, Button and Guides, with CSS transitions only. The product and its steps are made up.

FAQ

How do I use my own steps?

Edit STEPS: each has an id, a name and the sentence in text. The Steps list, the slides, the dots and the status line are made from it. The icon and drawing for a step are picked by its id in StepIcon and the diagram components, so add one of each when you add a step.

How does it work with a keyboard?

Tab reaches the dots, Previous and Next. With focus inside the panel, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last step. The Steps list is not interactive, so it is not in the tab order. Previous and Next stay in the tab order at the ends, marked as unavailable. Slides that are out of view are hidden from the tab order and from screen readers.

How does the carousel stay in step with the Steps list?

There is one number, the page. The Steps list sets it, a swipe or the buttons set it, and everything reads it back, so they can never disagree. The page follows Embla's select event, and the Steps list calls scrollTo.

What is announced when it moves?

The foot line is the block's one polite live region: after each move a screen reader hears it, for example "Step 2 of 4: Configure". The track itself is silent, so the same slide is not read twice.

What stays local in the demo?

Everything. The steps are typed text and drawings; nothing connects to anything. To wire it for real, replace the copy and drawings with your own and keep the Steps and the track as they are.

How does it look on a phone?

The Steps band shows only the numbers, joined by their lines, the slide fills the width, and the counter and buttons share the first line of the foot with the dots on a line of their own under them.

All 100 carousel blocks