shadcn.io is not affiliated with official shadcn/ui
Illustrated Steps Gallery Block for Ark UI
A four-step picture-framing how-to: Steps as a band of hairline cells, a manual-style line drawing and three instructions for each step, a Mark step done button, a done count and a completed state.
Installation
Overview
An illustrated how-to gallery for React with Ark UI, for Handyframe, a picture-framing kit. Under a centred header, the Steps are a band of four cells that run rail to rail (Measure, Mat, Mount, Hang), and under it a framed panel pairs a manual-style line drawing of the step with three short instructions and what you need. "Mark step done" moves on, a readout says how many are done ("2 of 4 done"), and finishing the fourth shows a completed state in which the same button starts over. The drawings are strokes in your theme's foreground (a print with its width and height, a mat with its window cut low, a print hinged to a board, a frame on a hook under a level), not photographs. Nothing is sent anywhere; the progress lives in the page. Built from Steps, Button and Guides.
FAQ
Can I open any step?
The steps run in order: a later step opens once the one before it is marked done. Any step that is done can be reopened by choosing it, and that marks the steps after it as not done again, so the count always matches what you have ticked.
How do I use my own steps?
Edit STAGES: each has a short name, a brief, a heading, three tips and what you need, and DrawingFor returns a drawing for its id. Add a drawing component (or an img) per step. The count in the band, the panels and the readout all follow the list.
What does the completed state show?
After the last step is marked done, the panel says so and the button reads "Start over", which returns to the first step. The drawing stays on the last step's.
How does it work with a keyboard?
The band is one tab stop: the arrow keys move between the steps that are open, and Enter or Space opens one. Mark step done is an ordinary button after the instructions, and the readout is a status region, so a screen reader hears the new count.