shadcn.io is not affiliated with official shadcn/ui
Vertical Tabs Team Block for React
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.
Installation
Overview
A team section for React with Base UI, for Plovercote, a help desk. The first column holds a compact header and a vertical tab rail of five departments (Support, Knowledge base, Integrations, Engineering and Customer success), each row with its name, its headcount and three overlapping avatars; a hairline divider, meeting the top rule with a + mark, separates it from the second column. The page for the chosen department says in one sentence what the team owns, shows its lead between two rules and lists the rest of the team. All five pages stay in the document and share one height, so switching moves nothing. On a phone the rail becomes a row of chips that scrolls sideways above the page, and a page shows its lead and four people with a Show all button. It's built from Tabs, Avatar Group, Avatar, Badge, Button and Guides, with your theme's tokens for every colour. The people are invented.
FAQ
How do I change the departments?
Edit DEPARTMENTS at the top of the file. A department has an id, a label, one sentence about what it owns and its people, the lead first. The headcount, the three avatars in the rail (the first three people) and the total in the header come from that list.
How does the keyboard work?
It's a vertical tab list, so Tab moves into it, the up and down arrow keys move between departments and Home and End jump to the ends. On a phone, where it is a row of chips, the same keys apply. Each page is reachable with Tab after the rail.
Are all the pages in the document?
Yes, every page is kept in the page and only the selected one is shown, so find-in-page reaches every name.
Hidden pages are kept mounted with keepMounted.
What changes on a phone?
The rail becomes chips (a name and a count) in a scroller, the avatars are dropped, and the page is one column under it: the sentence, the lead, four people and a Show all button. The divider is not drawn, and a rule under the header separates the chips from it.
Related
- 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
Highlight Filter Team
Grids and wallsEighteen 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 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
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
Vertical Tab Accordion Preview Features
Tabs and accordionsA features section for an admin console in three panes: a vertical tab rail of five categories, an accordion of that category's features, and a console screen on the end side that outlines the row of the open feature.
- Pro
Compact List Team
Lists and directoriesThe 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.