shadcn.io is not affiliated with official shadcn/ui
Goal Rings Team Block for Ark UI
Four 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.
Installation
Overview
A team goals section for React with Ark UI, for Stainmore, a quarterly-planning tool. A centred header explains the picture in one line, and four cells that share their hairlines, rail to rail, hold the goals. Each cell is a Circular Progress ring that fills to the goal's progress with the percentage in its middle, and a short tick across the ring where the quarter itself stands (week 8 of 13): a goal whose arc runs past the tick is ahead of time, one that stops short of it is behind. Under the ring come the goal's name, a word with an icon for its pace (Ahead of pace, On pace, Behind pace or Done), the owning team and, for the goal that is stuck, a Blocked badge with what it waits for. A closing band counts the goals done, in progress and blocked. The rings sweep in once on load. It's built from Circular Progress, Badge, Sliding Number and Guides, with your theme's tokens for every colour. For team pages, planning reviews and status pages.
FAQ
How do I change the goals?
Edit GOALS and QUARTER at the top of the file. A goal is a name, an owner, its progress (0 to 100), a state (active, blocked or done) and, for a blocked one, what it waits for in blockedOn. The pace words, the tick's angle and the three counts in the band are computed from those; the tick sits at the share of the quarter that has gone, so changing QUARTER.week moves it on every ring.
How are Ahead, On and Behind worked out?
By the gap between a goal's progress and the quarter's pace (62% in week 8 of 13). Five points or more past the pace is Ahead of pace, five or more short is Behind pace, anything between is On pace, and a goal at Done says Done. Change SLACK to widen or narrow the middle. The word comes with an icon (an arrow up, an arrow down, a dash or a check), so the pace never depends on colour.
What is a ring made of, and is it named for a screen reader?
It's the catalog's Circular Progress (Ark UI's progress on every base), with the arc in the foreground colour; the tick is a small box turned to the pace's angle. The drawing is hidden from assistive technology and the same facts are in the text under it: each goal's pace line carries a hidden sentence ("78% done, ahead of pace"), and the goal's name is a heading.
What moves, and what happens with reduced motion?
Each arc sweeps in from empty once when the page loads, and the three counts roll to their numbers once when they come into view. With reduced motion the rings are drawn at their values and the counts show their final numbers; the cells' entrance fade is off too.