shadcn.io is not affiliated with official shadcn/ui
Numbered Steps Timeline Block for Vue
An annual boiler inspection as eight numbered steps with a Pass, Fail or N/A result, who signed and when, and a switch that hides N/A steps and renumbers the rest.
Installation
Overview
Keep the numbers honest while steps come and go with this numbered steps timeline for Vue with Ark UI. It is written for Inspectly, a fictional equipment inspection tool. A hairline frame with a plus mark on each corner holds the record of one annual boiler inspection as a real ordered list of eight steps. Each has a numbered marker, a result in words (Pass, Fail or N/A), the initials of who signed it and the time, and the failed step carries its note. It is a record, not a wizard: nothing moves you through it. A switch "Hide steps marked N/A" takes those steps off the rail and the numbers close up, so each row reads "Step 4 of 6" because the number is worked out from what is shown. A band of figures counts passed, failed and N/A. It is built from Switch, Badge, Avatar and Guides with CSS for the rail. For safety checks, audits, handovers and any signed list of steps. The inspection is example data.
FAQ
How do I change the steps?
Edit CHECKS at the top of the file: a title, the result (pass, fail or na), the initials, the time and a note. The numbers, the counts and the "of" total are derived from the list that is shown.
How does the renumbering work?
Each row's number is its position in the list that is shown. Hiding N/A steps filters the list, so the remaining steps count from 1 again and every row's "of" total follows.
What stays in the page?
The switch. Nothing is signed, saved or sent, and the signatures are example initials. To make it real, load the inspection from your records and sign steps on the server.
Does the panel change height when I hide steps?
No. The other view is drawn unseen in the same place, so the panel keeps the taller height.