shadcn.io is not affiliated with official shadcn/ui
Drill-Down Org Chart Team Block for Radix UI
A claims desk as a drill-down in a framed figure of three columns: pick a head of function, then a team lead, and each pick fills the next column; on a phone one list shows at a time under a breadcrumb that steps back.
Installation
Overview
An org chart for React with Radix UI, for Fordwell, an insurer, drawn as a drill-down. A start-aligned header sits over a framed figure of three columns under + marks: four heads of function, then the team leads under the one you pick, then the specialists under the lead you pick. Each column is a list of people, each with an initials avatar, a name, a role and a chevron where there is more underneath, and the path you have taken stays marked down all three with a bar and a tint. It opens on one path so every column is full; picking a different head clears the columns after it. On a phone only the deepest column shows, under a breadcrumb row whose crumbs step back up the chart. It's built from Listbox, Breadcrumb, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For claims desks, support teams and any chart that is wider than it is deep.
FAQ
How do I change the people and the levels?
Edit HEADS at the top of the file. A person is an id, a name, a role and, if they manage anyone, a reports list. The three columns are the three levels: LEVELS names them and says what to show before a pick above them. For a fourth level, add an entry to LEVELS, raise LAST to 3 and change the figure's lg:grid-cols-3 to four columns.
How do I use it with a keyboard and a screen reader?
Each column is a listbox named for its level ("Heads of function", "Team leads", "Specialists"). Tab moves from one column to the next, the Up and Down arrows move the highlight within a column, and Enter or Space picks the person, which fills the next column. The picked row is marked as selected for assistive technology as well as with the bar. A polite status line, visible only to screen readers, says whose team is now showing and who is in it.
How does it fit on a phone?
Below lg only the deepest column shows, so the chart is one list at a time. A breadcrumb row above it ("Fordwell, Nadia Farouk, Gustavo Pires") holds buttons that step back up: pressing "Fordwell" returns to the heads of function. The last crumb is the page you are on and is not a button. A caption under the figure says so.
What does a column show when nothing is picked above it?
A short hint in its place ("Pick a team lead to see who reports to them"). Someone with no reports simply has no chevron: picking them marks their row and the next column shows its hint. Every column has a minimum height, so the block keeps its size as you drill in and back out.
Is the breadcrumb a real navigation landmark?
Yes: it's a nav named "Where you are in the chart" with an ordered list of crumbs, and it only appears on a phone. Its crumbs are native buttons rather than links, because they change what the chart shows and don't go to another page.
How are the lines drawn?
Guides draws the top rule and the frame with + marks on its corners; the two dividers between columns are the figure's own divide-x; every row draws a bottom border. The frame sits inside the rails, with the page's side lines running past it, and the block ends with its padding, so it draws no closing rule.