Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Dependency Chain Stepper Block for React Aria

A theatre set build drawn as a graph of five jobs joined by arrows, each Done, Active, Blocked or Waiting, where choosing a job says what holds it and completing one opens the next.

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 which jobs wait on which, with this dependency stepper for React with React Aria. A hairline frame with plus marks holds a graph of five jobs as buttons joined by arrows: Design, then Carpentry and Paint side by side, then Dress, then Tech. Each job is Done, Active (everything it needs is done), Blocked (a job it needs is active) or Waiting (a job it needs is itself held up), shown as a glyph and a word. Choosing a job fills a Data List with its crew, time, what it needs and what it opens up, and a line says "Blocked by: Carpentry and Paint". "Complete task" is the block's one Shine Button: on an active job it marks it done and names the jobs that can now start. For builds, releases and any plan with prerequisites.

FAQ

How do I define the dependencies?

Each entry in JOBS lists the ids it requires, plus a crew, a time and a position in the graph box. The states, the arrows, the "Needs" and "Opens up" rows and the messages are all worked out from those lists, so adding a job and its requires is enough.

What is the difference between Blocked and Waiting?

Blocked means a job it needs is active, so it is one step away. Waiting means everything it needs is itself held up. Both show what is missing, in the form "Blocked by: Carpentry" or "Waiting on: Dress".

What does Complete task do on a blocked job?

Nothing changes except the status line, which says what to finish first. The button is marked aria-disabled rather than disabled, so it stays focusable and says why. Done jobs say they are already done. When all five are done the button becomes Start over.

What stays local?

Which jobs are done and which is chosen are component state, lost on reload; nothing is scheduled. To keep them, store the done ids against the production and set them from your records.

Does it work right to left?

The graph is a diagram, so it keeps its left-to-right order in every language: jobs still flow from Design to Tech. The text around it, the detail rows and the buttons follow the reading direction.

How does it look on a phone?

The graph keeps its size and scrolls sideways inside its box, with the jobs still reachable by Tab. The detail and the button sit below it, as on a wide screen.

All 100 stepper blocks