shadcn.io is not affiliated with official shadcn/ui
Participation Rings About Block for Radix UI
An about section for an employee-engagement company: five rituals as rings for the share of the team that joins, each with a cadence badge and one line.
Installation
Overview
A participation board for React with Radix UI, written for Ringloft, a fictional employee-engagement practice. A centred header sits over five rituals in a hairline grid that runs from rail to rail: Hack week, Book club, Demo day, Walks and Volunteering. Each cell is a small ring for the share of the team that joins, an outline Badge for the cadence, the name, one line, and "N of 64 join". A sixth cell names the busiest ritual and fills the last seat, so the grid is two columns on a phone and three from md, with no empty place. Someone can join more than one ritual, so the rings are not slices of one pie. The page's rails and top rule come from the Guides spine, and the block ends on the grid so it does not draw a second rule. It's built from Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that wants to show how a team actually spends its time together. The joiners are example data.
FAQ
How do I change the rituals?
The rituals are RITUALS, built with ritual() from a name, a cadence, a one-line description and joiners. TEAM is the whole company. The percent is the joiners divided by TEAM, rounded, and the arc is drawn from that same percent, so the figure and the ring agree. The busiest cell is whichever ritual has the most joiners. Add or remove a ritual and the header count follows; keep the total of cells even so the last row stays full.
How is it read by a screen reader?
The heading is the section's only h2. Each ritual is an h3, then its line, then "41 of 64 join" (the numbers come from the data). The ring is decorative: the percent is written in text over it, and the svg is hidden from assistive technology. The cadence is a badge. The last cell is a paragraph, not another heading. The lines are drawn by a layer hidden from assistive technology.
Can I click a ring?
No. A ring is a figure, not a button. The percent, the cadence and the line are all visible, so there is nothing to reveal. The block has no state and can render on the server.
Why don't the rings add up to the team?
A person can be in the book club and on the walk. Each ring is the share of the team that joins that ritual, not a slice of a single total. The last cell says this, and it names the ritual with the most joiners.
How does it fit on a phone?
Two columns, three full rows: five rituals and the busiest cell. From md it is three columns, the last cell filling the sixth seat. The badge sits beside the ring and wraps if the cell is tight. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the grid and the badge follow the reading direction. The ring is not mirrored.