shadcn.io is not affiliated with official shadcn/ui
Course Steps Learning Path Team Block for React
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 React with Base 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.
Related
- Pro
Progress Tracker Learning Goals Team
Learning and mentoringA team learning tracker in a split: a completion ring worked out from five goals with four counted facts at the start, and a row per person at the end with their goal, a progress bar, the quarter it is due and details that open in place.
- Pro
Journey Steps Mentorship Pair Team
Learning and mentoringOne mentoring pair of a leadership program and where they are on their journey: the mentor and mentee, their cadence and topics, and four read-only steps with the week of each, two done, one current and one to come.
- Pro
Tabbed Ladder Career Paths Team
Learning and mentoringThree career tracks as flat tabs, each a five-rung ladder drawn upward on a rail: the level, the title, one line on what it expects and the people who are on it today.
- Pro
Quarter Goals Team
Learning and mentoringOne person's quarter for a project tracker: an objective with its overall completion and three key results as rows, each with a bar and a tick for how far the quarter has gone, an owner, a status word with an icon, and notes that open in place.
- Pro
Onboarding Checklist Team
Hiring and onboardingOne person's setup list at a security-awareness company: a ring that fills as tasks are ticked, a Next up band, and fourteen tasks in three collapsible groups, each task with a due tag.
- Pro
A learning-budget table for a learning platform, where the headline is the sum of each program's spend per person and a bar shows the share of the team that joined.