shadcn.io is not affiliated with official shadcn/ui
Course Steps Learning Path Team Block for Svelte
One person's study path for a certification as read-only vertical steps: five courses in hairline rows, ticked when done, a halo on the one in progress, each with a quiet bar and the hours to go.
Installation
Overview
A study path for Svelte with Ark UI, for Inglewood, a certification-prep service. A start-aligned header introduces the person (an initials avatar, a name and a role) and says how many courses are done and how many hours are to go, both worked out from the courses. Under it, the catalog's vertical Steps are drawn read-only as hairline rows that run from rail to rail and end the block, with a rail joining the markers. Each row is a course: a marker (a tick when done, a number with a halo for the one in progress, a plain number for those to come), its name and length, and at the end a quiet bar with "Done" or the hours to go written beside it. On a phone the bar sits under the name. It's built from Steps, Progress, Avatar and Guides, with your theme's tokens for every colour. For a member profile, a course platform or a team page that shows one person's learning. The person and the courses are invented.
FAQ
How do I change the courses?
Edit COURSES at the top of the file: a course is an id, a title, its length in hours and progress from 0 to 100. List them in the order they are taken. The step the person is at (AT) is the first course that isn't at 100, so updating a course's progress moves the halo and ticks the earlier markers. The hours to go in the header and at the end of each row are worked out from the length and the progress.
Are the steps buttons?
No. Steps is used as a read-only list: the markers show where the person is, they don't move them. Each row is a list item, the one in progress is marked as the current step, and each course's name is preceded by hidden text that says "Done:", "In progress:" or "Up next:", so the state isn't carried by the marker alone.
Is the progress readable without seeing the bar?
The bar is decoration. The end of each row says "Done" or "6 h to go" in text, and the header counts the courses done. The bar is the foreground colour rather than the theme's primary, so the primary stays free for your own main action.
Does it follow right-to-left languages?
Yes. The markers sit at the start of each row, the rail is positioned with logical offsets so it stays under them, and the hours, with their units, are wrapped so they keep their order.