shadcn.io is not affiliated with official shadcn/ui
Office Tabs Team Block for React
The four offices of a surveying app in a split: a vertical tab rail of offices beside a page with the address, the local time, the opening hours, the people who work there and a Plan a visit link.
Installation
Overview
An offices section for React with Base UI, for Tennant & Ross, a surveying app. The first column holds a compact header and a vertical tab rail of four offices (Perth, Brisbane, Nairobi and Windhoek), each row with its city, its country and its headcount; a hairline divider, meeting the top rule with a + mark, separates it from the second column. The page for the chosen office gives its address, the time there now, its opening hours, the people who work in it in hairline rows and a Plan a visit link. Every page is also drawn once, unseen, in the same grid cell, so the cell is as tall as the tallest and switching offices moves nothing. On a phone the rail becomes a row of chips that scrolls sideways above the page. It's built from Tabs, Avatar, Button and Guides, with your theme's tokens for every colour. The offices, the streets and the people are invented; the cities are real.
FAQ
How do I change the offices?
Edit OFFICES at the top of the file. An office has an id, a city, a country, the address as one string per line, its opening hours as term and value pairs, an offset (minutes east of UTC) with its offsetLabel, and its people. The headcounts in the rail and the total in the header come from the people lists.
How does the keyboard work?
It's a vertical tab list: Tab moves into it, the up and down arrow keys move between offices, and Home and End jump to the ends. The same keys work when the rail is a row of chips on a phone. The page is the next stop after the rail, and its Plan a visit link follows.
How is the local time worked out?
In the browser, after the page loads, from the office's fixed offset, refreshed every half minute; until then it reads --:--, so the server and the browser agree. The four example cities keep no daylight saving, so a fixed offset is always correct for them.
Does the block change height when I switch offices?
No. Every page is drawn once more, unseen (hidden from assistive technology and the keyboard), in the same grid cell as the real one, so the cell is as tall as the tallest page. The real page is the only one a reader or a find-in-page can reach.
Related
- Pro
Office Bands Team
Hours and placesThree offices of a hotel revenue-software company as bands that run from rail to rail: the city and its address, the local time there, the headcount, and three of the people you will meet in cells that share their hairlines.
- Pro
Vertical Tabs Team
Tabs and accordionsThe 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
Countries Table Team
Hours and placesA remote-first CRM's people by country: region tabs over a table with each country's cities, its headcount as a number and a thin bar, and three of the people who live there.
- 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
City Tabs Locations Contact
Contact formsA contact section for a coffee roaster with four cafes: city tabs over a panel with address, hours and a street map, and a form addressed to the cafe you picked.
- Pro
Time Zone Axis Team
Hours and placesTen people of a remote-first payroll company laid along an axis of UTC offsets, each office with its avatars, a live local time and a shaded band where it is working time, over six cells that list the same zones.