Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stepper blocks

Pro

Zigzag Path Stepper Block for Solid

A newsroom story tracker with five stages on a wave of buttons joined by diagonal segments, where advancing the story fills the path and opens the next stage's card.

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 a flow as a path instead of a line, with this zigzag stepper for Solid with Ark UI. A plus-marked frame holds a band with a Steps wave of five buttons that sit alternately high and low (Pitch, Draft, Edit, Design and Publish), joined by diagonal segments: solid once a stage is done, dashed while it is still ahead. Done and open stages are filled in foreground tones, and the open one has a ring. Under the wave, the chosen stage's card gives its desk, due date and length in a Data List. "Advance story" is the block's one Shine Button, and the last press ends on a note that nothing was published. Stages you have reached stay pressable and Back is free. On a phone the wave keeps its shape, the labels turn into numbers and only the open stage keeps its name. For editorial pipelines, approvals and any flow that reads better as a route.

FAQ

How do I change the stages?

Edit STAGES for the text of each card and POINTS for where each node sits on the wave, as percentages of the band. The segments are worked out from POINTS, so moving a node moves the line that joins it. Add a stage by adding an entry to both lists; the first node can sit high or low, the pattern is just the values you give it.

How are done and upcoming segments told apart?

By the stroke: a segment before the open stage is solid and in the foreground colour, the ones ahead are dashed and faint. The colour change is backed by the node itself, where a done stage shows a check and the open one a ring, and by a hidden "Done:" or "Current:" read before each name.

What stays local?

The current stage is component state and is lost on reload; no story is published and nothing is scheduled. To make it real, send the stage change to your content system from the go function and load the story's current stage into the initial state.

How does the keyboard work?

The wave is one tab stop on the open stage. Left and Right arrows move between the stages you can reach, Home and End jump to the ends, and Enter or Space opens the focused one. After a move the stage's heading takes focus and a polite line says "Step 3 of 5: Edit".

Does it work right to left?

Yes. The wave is mirrored, the nodes are placed from the start edge, and the diagonals follow, so the story still travels from the reading start to the end. Dates and counts keep their own direction.

How does it look on a phone?

The wave shrinks with the panel and keeps its high and low nodes. Only the open stage shows its name; the others are numbered, with their names still read aloud. The card and the foot stack below with the button pinned to the bottom.

All 100 stepper blocks