shadcn.io is not affiliated with official shadcn/ui
Half Donut Card Stats Block for Radix UI
A team's weekly capacity as a 180-degree arc of four segments with the total in its foot and a four-cell legend band, with no needle: one whole, shared out.
Installation
Overview
A half donut for React with Radix UI. A centred header ("55% of our capacity goes to Build") sits over two bands that run from rail to rail and end the block. The first holds a 180-degree arc of the week's 720 hours of capacity in four segments (Build, Run, Support and Idle) in solid foreground weights, running from the start end of the arc over the top to the far end with a 2 px gap between neighbours, "0" and "100%" under its two ends and the total, rolling up once, in its foot. It has no needle: it shows one whole shared out, not a reading on a scale. The second band is a legend of four cells that share hairlines, each with its swatch, name, hours and share, four across from lg and two by two below it. The shares are whole numbers that add up to 100 (largest remainder), and every arc, share and the total is computed from one typed list of hours. The page's rails and top rule come from Guides, and the bands draw their rules with Guides too, so they carry the + marks.
FAQ
How do I change the segments?
Edit KINDS at the top of the file: each has a label and its hours; PEOPLE is the head count in the header's sentence. Up to four weights are defined in WEIGHTS. The total, the shares, the arcs, the cells and the header's headline are computed from the list.
How is the half ring drawn?
Each segment is a circle that is turned to start at nine o'clock and whose length is set to 200 units, so its first 100 units are the half that shows and 100 units are also 100 percent. A dash pattern draws each segment's share of those 100 units, less a two-unit gap, and the rest of the circle is left empty. It needs no chart library and no path maths beyond the shares.
Why is there no needle?
A needle reads a value on a scale (a gauge); this arc shows how one whole is divided, so its segments are the numbers and the ends are 0 and 100%. For a dial with a needle, use a gauge block.
Is it accessible?
The legend is a description list (a term for the kind of work, its hours and share as descriptions), so a screen reader reads every number. The arc is hidden from assistive technology because the list says the same, and a caption for screen readers says what the ring shows. The total is real text, and with reduced motion the arcs and the digits appear at once.