shadcn.io is not affiliated with official shadcn/ui
Vertical Tabs Team Block for Solid
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 Solid with Ark 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. The tabs component keeps hidden pages mounted.
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.