Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Compact List Team Block for React Aria

The quiet roster of a fleet-telematics company: one dense line per person at forty pixels, rail to rail, twelve shown and the other twelve opened in place from a Show all button.

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 plain team list for React with React Aria, for Wraxall, a fleet-telematics company. A centred header sits over one dense list that runs from rail to rail: a small initials avatar, the name, the role and the department as plain text, forty pixels a row, with nothing else to look at. Twelve of the twenty-four people are shown; a Show all 24 button on a band under them opens the other twelve in place, so nothing above it moves. On a phone each person is two lines, with the department after the role, six people are shown and the button opens all the rest. It's built from Avatar, Button and Guides, with CSS transitions and your theme's tokens for every colour. For about pages and footers of marketing pages where the team should be there but quiet. The people are invented.

FAQ

How do I change the people?

Edit PEOPLE at the top of the file: a name, a role and a department, in the order you want. The first twelve are shown at rest and the rest open under the button; change REST_COUNT to move that line. The header's total and the button's label are counted from the list.

How does the Show all button work?

It's a button with aria-expanded that controls the second list, and its label stays the same when open (the chevron turns). The second list opens in place with a short height transition, and while it is folded it can't be tabbed to or read. Its rows continue the first list's lines.

Is it a list?

Yes: each person is a list item with the name in an h3, and the two lists are named "Wraxall's team" and "More of Wraxall's team". The avatars are hidden from assistive technology; the initials add nothing the name doesn't say.

How does it fit on a phone?

Each row is two lines, the name and under it the role and the department, so nothing truncates at 320 pixels. Six people are shown; the Show all 24 button opens the other eighteen.

How does the block end?

On its last row. The rows draw only a top rule between them, the button band's rule comes from Guides with + marks at the rails, and the block draws no bottom rule: the next block's top rule closes it.

What moves, and what happens with reduced motion?

The header and the list fade up once on load, and the second list opens with a height transition. With reduced motion both are off and the rows appear at once.

All 126 team blocks