shadcn.io is not affiliated with official shadcn/ui
Accordion Profiles Team Block for Radix UI
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 Radix UI, 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?
Use type="multiple" with an array defaultValue instead of type="single".
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.
The Up and Down arrows also move between rows, and Home and End jump to the first and last.
Are the closed panels in the page's markup?
No. This Accordion renders a panel only when its row opens. If search engines must read every bio, render them in a list that always shows them.
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.