shadcn.io is not affiliated with official shadcn/ui
Progress Tracker Learning Goals Team Block for React
A 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.
Installation
Overview
A learning tracker for React with Base UI, for Skelwith, an e-learning studio. A split with a hairline divider puts the header, a ring and four facts at the start, and five people's goals at the end. The ring shows the team's completion, the average of the five goals' progress, and four facts counted from the same data sit beside or under it: goals, done, hours to go and the next quarter due. Each row has a round initials avatar, a name and role, the goal in words, a quiet bar with the percentage beside it and the quarter it is due ("Q3"). A Details button opens what comes next, the hours to go and the topics, in place, and another press closes it. On a phone the ring and facts sit above the rows, and the rows end the block. It's built from Progress, Badge, Button, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For a learning and development page, a team handbook or an internal dashboard. The people, goals and figures are invented.
FAQ
How do I change the goals?
Edit GOALS at the top of the file: each goal is an id, a name and role, a title, a progress from 0 to 100, the target quarter, the hours still to do, the next step and a list of topics. The ring, the "done" and "hours to go" facts and the next quarter due are all worked out from that list, so nothing else needs editing: the ring's arc is the average of every progress, rounded.
What is derived and what is typed?
Typed: each goal's progress, its quarter and its hours. Derived: the team completion (the rounded average), the number of goals done (those at 100), the hours to go (their sum) and the next quarter due (the earliest quarter among goals that are not done). Change a goal and all four follow.
How do the details open, and is that accessible?
Each Details button says whether it is expanded and which region it controls, and its label stays "Details" when it opens. The folded region is hidden from sight and from the keyboard and screen readers, so nothing in it can be reached until the row is open. Opening grows the row in place, with a short height transition that reduced motion turns off. Each row opens on its own: several can be open together.
Is the progress readable without seeing the bar?
The bar is decoration. The percentage is written beside it as text, and the quarter is read as "Due Q3". The bar is the foreground colour, not the theme's primary, so the primary stays free for your own main action.
Does it follow right-to-left languages?
Yes. The split, the rows and the bars follow the page direction, the Details button sits at the end of its row, and the percentages and the counts are wrapped so their digits and the percent sign keep their order.
How does it fit on a phone?
The ring and the four facts come first, one above the other below sm and side by side up to lg, then the rows in one column with a hairline between the parts. The bar takes the width that's left beside the percentage and the quarter, so nothing scrolls sideways at 320 pixels.
Related
- Pro
Course Steps Learning Path Team
Learning and mentoringOne 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.
- 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
Goal Rings Team
Learning and mentoringFour goal rings for a quarterly-planning tool in cells that share their hairlines: each ring fills to the goal's progress with a tick where the quarter stands, so ahead and behind read at a glance, over a band that counts goals done, in progress and blocked.
- Pro
Skill Bars Team
Skills and expertiseA picker of five e-learning specialists beside a framed figure of five skill bars: choosing a person fills the bars to their scores, each with its number and a tick for the team average on its track.
- 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.