Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Animated Accordion Team Block for React

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.

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

A department accordion for React with Base UI, for Ellermoor, a clinic booking system. The title, one sentence and an Expand all button sit at the start, behind a split divider; four department rows sit at the end, each with the department's name, its headcount and a small stack of its members' initials. Opening a row shows what the department owns in one sentence and lists its three people with their roles. Any number of rows can be open, two are open on load, and Expand all opens the rest and becomes Collapse all. On a phone the copy stacks above the rows and the button spans the width. It's built from Accordion, Avatar Group, Avatar, Button and Guides, with CSS transitions and your theme's tokens for every colour. For team pages organised by department. Names are made up for the example.

FAQ

How do I change the departments and people?

Edit DEPARTMENTS at the top of the file. A department is an id, a name, an owns sentence and a list of members, each a name and a role. The headcounts, the avatar stacks and the "12 people in four teams" sentence are counted from the same data. OPEN_ON_LOAD lists the departments that are open at first.

How does the multi-open accordion work?

The Accordion takes multiple and a controlled value array, and reports changes through onValueChange with the array of open values.

The block keeps that array in state, which is how Expand all can open every row and know when they are all open.

What does the Expand all button do for a screen reader?

It is a real button with aria-controls pointing at the list. Its label changes between Expand all and Collapse all, so a screen reader hears what pressing it will do next. It is the first control in the block, so a keyboard reaches it before the rows.

How does it work with a keyboard?

Each department is a button inside its own h3 under the section's h2. Tab moves from the Expand all button to each row, and Enter or Space opens and closes one. This library leaves the arrows to Tab: every row is a tab stop.

Why do the initials in each row overlap?

They are an Avatar Group, a stack that shows who is in the department at a glance without a row of names. The avatars are decorative: the names are listed in the panel, and the row's headcount is real text, so nothing depends on seeing the stack.

How does it fit on a phone?

Below the lg breakpoint the copy stacks above the rows, a rule separates them, and the Expand all button spans the width. The avatar stack stays beside the headcount; nothing scrolls sideways at 320 pixels.

  • Pro

    Accordion Profiles Team

    Tabs and accordions

    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.

  • Pro

    Department Tabs Team

    Tabs and accordions

    Thirty people of a grocery-delivery company by department: underline tabs with headcounts, then each panel opens with its lead on a tinted band and the team as two columns of hairline rows.

  • Pro

    Highlight Filter Team

    Grids and walls

    Eighteen people of an event-ticketing company on a dense wall of hairline cells, with department chips that dim everyone outside the selection in place, so nobody moves and the wall keeps its height.

  • 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

    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

    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