shadcn.io is not affiliated with official shadcn/ui
Participation Rings About Block for React
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 Base 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.
Related
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Timetable Day in the Life About
Culture and valuesOne person's Tuesday as a timetable: three lanes (Focus, Meetings, Support) over the working day, with blocks you pick to read what each one was for.
- Pro
Behind the Scenes About
Culture and valuesOne Tuesday at a theatre-software company, by department: an accordion of Support, Infrastructure and Design, each with that day's numbers, tools and an honest note.
- Pro
Team Breakdown Bars About
Team and officesA team counted three ways in 100% bars (by function, location and tenure), where choosing a segment in the legend names its share and count under the bar.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
Values Cloud About
Culture and valuesA cloud of nine values for a writing app, sized by how often each wins when two disagree: pick a pill in a framed tray and a band under it says what the value means and what it costs us.