shadcn.io is not affiliated with official shadcn/ui
Illustrated Steps Gallery Block for React
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 Base 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.
Related
- Pro
Product Tour Gallery
Stage and thumbnailsOne drawn checkout-builder screen framed beside three feature rows, with a Take the tour button that runs a four-step Tour: popovers anchored to regions of the screen, each spotlit.
- Pro
Evolution Case Study Gallery
Annotated picturesOne identity in four pictures (a logo sketch, a wireframe, a mock-up and the shipped screen) beside a sticky summary and a stage index whose bar follows the stage on screen.
- Pro
Stepper Wizard Progression Features
Timelines and stepsA working CSV import wizard in a framed card: Upload, Map columns, Preview and Import, with real Back and Next buttons, selects that match columns to fields and a preview that follows the choices.
- Pro
Vertical Steps Journey
Principles and processA customer journey section for a CRM: the first 90 days as a vertical stepper with the catalog Steps, each stage with its timing, its hands-on time and its key action, and a line that says which stage you are in.
- Pro
Accordion Step By Step Blog
Tutorials and seriesA tutorial in five steps: a single-open accordion on a vertical rail, a Done button that ticks a step and opens the next, and a framed drawing of the open step.
- Pro
Floor Plan Unit Types Gallery
Annotated picturesFour unit layouts drawn to one scale on a metre grid, picked from a toggle group, with a Furnished switch, numbered rooms and a room table whose rows ring their room in the plan.