shadcn.io is not affiliated with official shadcn/ui
Compact List Team Block for React
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.
Installation
Overview
A plain team list for React with Base UI, 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.
Related
- Pro
Searchable Directory Team
Lists and directoriesA field-service company's eighteen people in one table, under a ruled band with a search field, department and city selects, a live count and a clear button, with an empty state when nobody matches.
- Pro
Sortable Directory Team
Lists and directoriesA document-signing company's ten people in a table whose cells share their hairlines, sorted by name, department or tenure from the header, with a tenure bar and a live sort announcement.
- 0102030405Pro
Numbered List Team
Lists and directoriesSixteen people of a plant-care app as an ordered list in the order they joined, each row an employee number in tabular figures, an initials avatar, a name, a specific role and a company-relative join year.
- Pro
Grid Cards Team
Grids and wallsTwelve 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
Department Tabs Team
Tabs and accordionsThirty 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
Minimal Avatars Team
Carousels and reelsA single quiet strip: twelve overlapping initials avatars and a +12 count, each avatar a focusable link whose name and role show in a tooltip, with one line under it that says how many people work in how many countries.