Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Assignee Avatars Stepper Block for React Aria

A flat handover in four phases with the lead's initials on each indicator, a stack of everyone on the open phase, a derived count of how many phases a person has and a field that reassigns the lead.

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

Put a name on every stage with this assignee stepper for React with React Aria. A plus-marked frame opens on a Steps rail across the top: the four phases of a flat handover (Walkthrough, Fix, Re-inspect and Sign-off), each indicator holding the initials of the phase's lead and the lead's name under the title, such as "Odessa K. +1". Below, the open phase's panel shows everyone on it as a stack of initials Avatars, who leads and in what role, and a count worked out from the data: "Odessa Kline has 2 of 4 phases". A "Reassign the lead" Native Select hands the phase to someone else, and the rail, the stack and the count all follow. "Next phase" is the block's one Shine Button. On a phone the rail scrolls sideways. For handovers, rotas, reviews and any job with owners.

FAQ

How is the count worked out?

phasesOf counts the phases where the person is the lead (from state) or in the phase's crew (from data). Reassigning changes the lead, so both the person who gains a phase and the one who gives it up see their count change. A person who was the lead and not in the crew leaves the phase's stack when they hand it over.

Why initials and not photos?

The demo has no photographs, and initials are always legible and always available. The indicator holds the lead's initials in place of a number; once a phase is done it turns into a check. The stack of avatars is hidden from screen readers, because the names are in the text beside it.

What does Reassign the lead do?

It picks anyone from the six people, with their role in the option, and replaces the phase's lead in state. The status line says so, for example "Fix: Zuri A. leads". It is a select you can use from the keyboard like any other; nothing is sent to the person.

How does the keyboard work?

The rail is one tab stop on the current phase. Left and Right arrows move between the phases you have reached (swapped in right to left), Home and End jump to the ends, and Enter opens one and moves focus to its heading. Tab goes on to the select and the buttons.

What stays local?

The leads and the current phase are component state and are lost on reload; no one is notified and no list is saved. To make it real, call your API from reassign and load the phases and crew from it.

How does it look on a phone and right to left?

The rail keeps its width and scrolls sideways inside its band, so the titles stay readable; the panel and the buttons stack below it. Right to left mirrors the rail and the stack, and names stay whole in their own runs.

All 100 stepper blocks