shadcn.io is not affiliated with official shadcn/ui
Accordion Profiles Team Block for React Aria
Ten people of a recruiting-tool company as hairline accordion rows that run from rail to rail; opening a row shows the department, a two-line bio, a personal quote and two text links, one row at a time.
Installation
Overview
An accordion team section for React with React Aria, for Rookfield, a recruiting tool. A compact header sits over ten hairline rows that run from rail to rail and end the block. Each row is an initials avatar, a name, a role and a chevron; opening one inverts its avatar and shows the person's department and city, a two-line bio, one personal quote and two text links ("Marta's profile", "Write to Marta"). One row is open at a time, and the first is open on load so the panel's look shows at a glance. On a phone it shows six rows and a Show all 10 button. It's built from Accordion, Avatar, Badge, Button and Guides, with CSS transitions and your theme's tokens for every colour. For about pages and careers pages where a visitor wants to meet people one at a time. Names, bios and quotes are made up for the example.
FAQ
How do I change the people?
Edit PEOPLE at the top of the file. A person is an id, a name, a role, a department, a city, a first name for the links, a bio and a quote; the initials come from the name. OPEN_PERSON names the row that is open on load. The bio shows two lines at the panel's width, so keep it near 120 to 150 characters.
How do I let several rows stay open?
Add allowsMultipleExpanded to the Accordion. The block's defaultExpandedKeys already takes an array.
How does it work with a keyboard?
Each name is a button inside its own h3 under the section's h2. Tab moves from row to row, and Enter or Space opens and closes one.
This library leaves the arrows to Tab: every row is a tab stop, with no arrow-key roving between them.
Are the closed panels in the page's markup?
Yes. React Aria keeps every closed panel in the markup as hidden="until-found", and the browser's find in page opens the one that holds a match.
How does it fit on a phone?
Below sm the rows show the first six people and a Show all 10 button in a band under them. The button is a disclosure: it says whether the list is expanded and which list it controls, and its label stays the same. The panel's text starts at the row's edge instead of lining up under the name, so nothing scrolls sideways at 320 pixels.
How are the lines drawn, and how does the block end?
The list's top rule, with + marks where it meets the rails, comes from Guides. Each row draws only its top rule, so no row draws a bottom edge: the next block's top rule closes the list, and on a phone the Show all band draws the rule under the sixth row instead.