Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Checkmark Trail Stepper Block for React

A mortgage document pack with the panel above and a trail of four circles in the foot, where each confirmed step draws its check and then fills the line onward.

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

Reward each finished step, with this checkmark trail stepper for React with Base UI. A plus-marked frame puts the step's panel above and a trail in the foot band: four circles with a short caption each (Identity, Income, Property and Review) on a Steps line, with Back and the Shine Button under it. A panel lists the documents that step needs and asks for one tick in a Checkbox, "I have these ready". "Confirm and continue" completes the step: its circle fills, the check strokes in over 300 milliseconds and then the line to the next circle fills. With reduced motion the finished check appears at once. The last step reviews the pack and ends on "Pack ready in this demo". For document collection, approvals and any flow where finishing a step deserves a moment.

FAQ

How does the check draw itself?

It is the catalog's own check icon. Its path is given a dash as long as itself and a transition on the dash offset, and the offset starts from the full length when the icon appears, so the stroke runs in. The line to the next circle waits 300 milliseconds before it fills. It is CSS only and the DRAW constant holds the classes; under reduced motion the transition is off and the check is drawn at once.

How do I change the documents?

Edit STAGES: each step has an id, a title, an intro, the list of documents and the label of its tick. The header's count and the review step's list are worked out from the lists, so add a document and they follow. Keep the review step last, since its list names the others.

What stays local?

The ticks and the current step. Nothing is uploaded or submitted to a lender: the last step ends on "Pack ready in this demo". To make it real, upload each file where the list is and enable the tick when the uploads succeed; call your API from advance on the last step.

What if I press Confirm without ticking?

Confirm and continue is marked aria-disabled, so it stays focusable; pressing it says "Tick the box for Income first" in the polite status line and the step doesn't change. Pressing a circle ahead of the open step does the same.

How does it look on a phone?

The captions are hidden visually but still read by screen readers, so the trail is four circles in a row, and the status line names the step. The panel stays above with its own minimum height, so the trail doesn't move as you go.

All 100 stepper blocks