Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Horizontal Icons Stepper Block for Radix UI

A four-stage manuscript submission in hairline cells with an icon in each indicator, where Continue checks the stage and names what is missing.

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 picture in every step, with this horizontal icon stepper for React with Radix UI. Four hairline cells under a plus-marked frame hold a Steps line whose indicators are lucide icons: a page for Manuscript, a pen for Cover note, a shield for Rights and a paper plane for Send. The open cell is tinted, and a finished stage swaps its icon for the check. Each stage has one real field: a title in an Input and a genre in a Select; a cover note in a Textarea with a character count; a Checkbox for first publication rights; and a read-back. Continue checks the stage first, says what is missing in the status line and in the space under the fields, and moves focus to it. It is the block's one Shine Button, and the last stage ends on "Sent in this demo". For submission, application and request flows.

FAQ

What does Continue check?

Stage one needs a title and a genre, the cover note needs at least 40 characters (the cap is 400), and the rights stage needs its box ticked. The rules are in problemOf, one function that returns the field to focus and the message. A refused press keeps the button pressable, writes the message to the polite status line and to a reserved slot under the fields, and focuses the field, so nothing moves.

How do I change the icons?

StageIcon returns the icon for each stage by its place in the list; swap any lucide icon there. The indicator keeps its size, so any icon at the catalog's icon size fits. When a stage is complete the catalog shows its check in place of the icon.

What stays local, and how do I send it for real?

The fields live in one entry object in component state, and nothing is sent: the last stage ends on "Sent in this demo". In your app, post entry from advance when the person presses the last button, show the request's state with the button's loading state, and put the reply in the final panel.

Can I jump ahead by pressing a cell?

Only to a stage you have already reached. Pressing a cell ahead of the current one runs the same check as Continue on the stage you are on, so a stage can't be skipped; pressing an earlier cell is free.

How does it look on a phone?

The four cells stay in one row with icons only, and a line under them gives the current stage as "Step 2 of 4: Cover note". The titles are still read by screen readers. The foot sticks to the bottom of the screen with Back and Continue side by side.

What does a screen reader hear?

The cells are a list of tab-like buttons, each named by its title, with arrow keys between the reachable ones. Moving to a stage focuses its heading; a refused Continue is read from the status line and focus lands in the field, with the field marked invalid.

All 100 stepper blocks