shadcn.io is not affiliated with official shadcn/ui
Collaboration Ring Graph Team Block for Radix UI
Nine people of a hospital rota company on a ring joined by chords: pick one and their chords go strong, the people they work with stay in tone, and a list says who they work with most and for how many hours a week.
Installation
Overview
A collaboration graph for React with Radix UI, for Teaselby, a hospital rota tool. A start-aligned header and a list sit at the start; a framed ring sits past a divider that meets the top rule at a + mark. Nine people are initials avatars on the ring, joined by chords that show who works with whom. Pick a person and their chords turn strong, weighted by the hours a week they spend with each person; the people they work with keep their tone and everyone else turns to an outline. The list is the content: a line names who they work with most, and each collaborator follows with their role and hours. On a phone the order is the copy, the ring, then the list. It's built from Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For team pages that show collaboration, not hierarchy.
FAQ
How do I change the people and who works with whom?
Edit PEOPLE and EDGES at the top of the file. A person is an id, a name and a role; the order of PEOPLE is the order around the ring, from the top, clockwise, and the positions are worked out for any count. An edge is two ids and the hours a week they spend working together; its chord is drawn thicker with more hours. The hours are example data: use any measure you can stand behind.
How do I use it with a keyboard and a screen reader?
Each person on the ring is a radio button in a group named "Pick a person to see who they work with", so Tab moves into the ring and the arrow keys move around it, picking as they go. Each radio is named with the person's full name and role. The chords are a decoration and are hidden from assistive technology; the list beside the ring holds the same facts as text, and a polite line says who the picked person works with most.
What does picking a person change?
Their chords go from a faint hairline to a strong line, wider for more hours; the avatars of the people they work with stay in tone and everyone else turns to an outline with muted text. The picked person is filled in with a ring. The list under the heading re-sorts to their collaborators, most hours first.
How does it fit on a phone?
The ring scales with the screen, so the nine avatars sit on it at 320 pixels and up; below the ring comes its caption and then the list, under a hairline. Every list row has the same height and the list keeps room for four rows, so picking someone never changes the block's height, although the rows re-order.
Why doesn't the ring mirror in right-to-left languages?
A ring graph is a diagram, not text, so it keeps its own direction and the people stay where they are; the copy, the list and the figures around it follow the page direction. The first names on the ring are set left to right, the way a name in a diagram usually is.