Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Clickable Jump Stepper Block for Solid

Six parts of a technical spec on an open rail that marks what you have read with a dot, counts them in the header and jumps to the first unread part with one button.

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 people read in any order and still see what is left, with this free-jump stepper for Solid with Ark UI. A hairline frame with plus marks holds a Steps rail of six parts of a spec (Overview, Requirements, Design, Build, Test and Release) and every one is open. A part you have opened carries a dot, one you have not a bare ring, the open one is filled, and the header counts them: "4 of 6 read". Each panel is a heading and two lines of summary. The block's one Shine Button, "Next unread", jumps to the first part you have not opened and moves focus to its heading; when all six are read it says "All six read". "Mark unread" clears the map. A polite line names the open part. On a phone the rail scrolls sideways. For specs, documentation, contracts and checklists with no fixed order.

FAQ

Why does it draw read parts itself?

The stepper marks everything before the current step as complete, which is wrong when there is no order. This block keeps its own list of opened parts and draws the dot, the ring and the count from it, while the rail still gives the tab stop, the arrow keys and the panels.

How does the keyboard work?

The rail is one tab stop on the open part. Arrow keys move focus along it, Home and End jump to the ends, and Enter or Space opens the focused part. Tab then continues to the panel and the foot buttons. "Next unread" moves focus to the heading of the part it opens.

What stays local, and how do I keep what a reader has read?

The list of opened parts is component state and is lost on reload. Store the ids per reader in the open function and load them as the initial list to keep the map between visits.

How do I change the parts?

Edit PARTS at the top of the file: each has an id, a title and a summary. The rail, the panels and the counts are drawn from it.

Does it work right to left?

Yes. The rail and the foot flip, and the count "4 of 6 read" is wrapped so it reads whole in any language.

How does it look on a phone?

The six parts stay in one row that scrolls sideways inside the frame, and the foot puts the two buttons side by side.

All 100 stepper blocks