Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Department Tabs Team Block for React

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.

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 team section for React with Base UI, for Stourford, a grocery-delivery company. A compact header sits over a ruled band of underline tabs, one per department (Engineering, Product and design, Delivery and Customer care), each with its headcount. Every panel opens with the department's lead on a tinted band, an outline Lead badge beside their name, then the rest of the team as rows in two columns that share their hairlines, with the last row closing the block. All four panels stay in the page and share one minimum height, so switching departments moves nothing below. On a phone the tabs scroll sideways under a fade, and a panel shows its lead and four people with a Show all button for the rest. It's built from Tabs, Badge, Avatar, Button and Guides, with CSS transitions and your theme's tokens for every colour. For about pages and company pages that list a team by department. The people are invented.

FAQ

How do I change the departments and people?

Edit DEPARTMENTS at the top of the file. A department is an id, a label and its people, with the lead first; a person is a name and a role. The tab counts, the lead band and the total in the header come from that list. The panels' minimum height is set for the largest team, nine people: adjust md:min-h-* if yours is bigger.

How do the tabs work with a keyboard?

Tab moves into the tab list, the left and right arrow keys move between tabs and Home and End jump to the first and last. The tab list is named Departments, and each panel is reachable with Tab.

Are the other departments' people in the page?

Yes. Every panel is in the page and only the selected one is shown, so find-in-page and the people's names are all in the document. Hidden panels are kept mounted with keepMounted.

How is the lead shown, and is it a list?

The lead is the first person of the department, on a tinted band above the rest, marked with an outline Lead badge. The others are a list, ul and li, with every name in an h3. The odd person out in a short second column simply leaves an empty cell; the lines come from each cell, so the grid stays closed.

How does it fit on a phone?

The tab list scrolls sideways, with a fade at its end to say there is more. A panel is one column: the lead, four people and a Show all button with the department's size. The button says whether the list is open and which list it controls, and keeps its label. The panels keep one minimum height, so changing tab doesn't jump.

What moves?

Only the header and the tabs fade up once when the page loads; switching tabs swaps the panel at once. With reduced motion the entrance is off.

  • 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.

  • 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

    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

    Searchable Directory Team

    Lists and directories

    A 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

    Compact List Team

    Lists and directories

    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.

  • Pro

    Categorized FAQ

    Topics and filters

    A topic-tabbed FAQ for a bookkeeping app: a compact header, a band of line tabs with a count on each, and one accordion per topic.

All 126 team blocks