Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Accordion Profiles Team Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An accordion team section for React with Base 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?

Add multiple to the Accordion.

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. The Accordion takes hiddenUntilFound, so closed panels stay 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.

  • Pro

    Animated Accordion Team

    Tabs and accordions

    Twelve people of a clinic-booking company in four department rows of a multi-open accordion, each with a stack of initials and a headcount, and an Expand all button that opens every department at once.

  • Pro

    Profile Drawer Team

    Lists and directories

    Eight people of a design agency as rows that each open one side drawer with a quote, a bio and three career figures, with Previous and Next buttons that step through the team without closing the drawer.

  • Pro

    Grid Cards Team

    Grids and walls

    Twelve people of a restaurant-software company in a hairline grid that runs from rail to rail, each an initials avatar with a name, a role, a department badge and a city, under a department picker that brings the picked team to the front and dims everyone else.

  • Pro

    Accordion FAQ

    Accordion lists

    A side-header FAQ for a web analytics tool: the title, one sentence and a contact prompt beside seven questions in an accordion, behind a split divider.

  • Pro

    Hover Reveal Team

    Lists and directories

    Six people of an architecture practice as a bare list of names and roles; hovering or focusing a row opens a hover card with the bio, base city and previous studios, and every row is also a link to the profile.

  • Pro

    Vertical Tabs Team

    Tabs and accordions

    The people of a help desk in a split: a vertical tab rail of five departments, each with its headcount and three avatars, beside a page that says what the team owns, shows its lead and lists the team.

All 126 team blocks