Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Stepper With Descriptions Block for Ark UI

A speaker pipeline in four equal columns, each with its indicator, title, description and state word, and a Sent tick that lets Continue through.

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

Let the step list explain itself, with this stepper with descriptions for React with Ark UI. A plus-marked frame holds a Steps row of four equal columns divided by hairlines: Invite, Brief, Rehearse and Present. Each column has its numbered indicator and a line at the top, the title, a short description and a state word (Done, Current or Up next), so the row alone says what every step is, and none of the descriptions are hidden. The open column is tinted. Under it the panel says what an organiser sends at that step, such as "The brief: slot, run sheet, AV check", with a Checkbox "Sent to Odalys Brandvold" that lets Continue through; the Shine Button is the block's one call to action. On a phone the columns stack as a list. For pipelines, hiring stages, order progress and event runs.

FAQ

How do I change the steps and their descriptions?

STAGES holds, for each step, an id, a title, the column description, the panel heading in sends and the sentence in contents; SPEAKER is the person the pipeline follows. The state words come from the position of each column relative to the open step, in stateOf, so there is nothing else to keep in sync.

Does the Sent tick send anything?

No. It marks the step on this page only, and the panel says "Nothing is emailed". To make it real, call your mail or CRM API from the tick's handler (mark) and tick the box only when the call succeeds. Closing the last step ends on "Pipeline closed in this demo".

Why can't I press Continue straight away?

Each step needs its Sent tick first. Continue is marked aria-disabled rather than disabled, so it stays focusable; pressing it, or pressing a column ahead, says "Tick Sent for Brief to go on" in the polite status line. Going back is always free.

How does the keyboard work?

The row is one tab stop on the current column. Arrow keys move between the columns you have reached, Home and End jump to the ends, and Enter or Space opens the focused one. After a move, focus goes to the panel's heading.

How does it look on a phone?

The four columns become a list, one row each, with the indicator at the start and the title, state word and description beside it. The connecting lines are hidden because the rows already stack. The foot stays pinned to the bottom of the screen with Back and Continue.

Does it work right to left?

Yes. The columns run from the right, the dividers and lines flip sides, and the arrow keys swap so Right Arrow moves back.

All 100 stepper blocks