Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Segmented Progress Stepper Block for Vue

A home-inspection report stepper of five label cells, each with a bar along its foot that fills once the part is inspected, and the part's checks listed under it.

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 progress as a row of cells that fill, with this segmented progress stepper for Vue with Ark UI. A plus-marked frame holds a Steps band of five equal cells ruled by hairlines: Exterior, Roof, Plumbing, Electrical and Report. Each cell is a button with its label, a word for where it stands (Done, Now or Next) and a thin bar along its foot that is full for a part that has been inspected and empty after; the cell you are on is tinted. There are no circles. Under the band, a Data List lists the part's checks, and the ones that turned up a finding carry a flag; the last cell sums every finding. "Mark inspected" is the block's one Shine Button. On a phone the cells scroll sideways and snap. For reports, audits, checklists and any job split into parts.

FAQ

How do I change the parts and the checks?

INSPECTED lists the four parts, each with its checks as a label, a value and a flag for a finding. The finding counts, the "3 parts inspected" line and the whole Report cell are worked out from them. To add a part, add it to INSPECTED; the report row for it appears by itself.

What stays local, and how do I make it real?

All of it. Which parts are inspected is component state, and issuing the report ends on a note that says it was not sent to a buyer. To make it real, send the part's id from advance to your API when it is marked, and issue the report from the last press.

Why does the current cell have an empty bar?

A bar is full only for a part that is done. The cell you are on is tinted and says Now, and its bar fills when you press "Mark inspected". The fill is a width transition, which is skipped when reduced motion is on.

How does the keyboard work?

The band is one tab stop on the current cell. Arrow keys move between the cells you can reach, Home and End jump to the first and last, and Enter or Space opens the focused one. Cells ahead of the furthest part reached are disabled, so the only way forward is the button.

What does a screen reader hear?

Each cell is a button named by its label, with Done, Now or Next read beside it. The checks are a description list, and a flagged check is read as "Finding: " before its value. The polite line reads "Part 3 of 5: Plumbing" after each move.

How does it look on a phone?

The cells keep a minimum width and scroll sideways with snapping, and the cell you move to scrolls into view inside the row only. The checks sit below at full width and the foot stays pinned with Back and the Shine Button.

All 100 stepper blocks