shadcn.io is not affiliated with official shadcn/ui
Office Headcount Bars About Block for React
Office rows for a global payroll company, each with a country code, a time-zone offset and a headcount bar drawn to the scale of the largest office.
Installation
Overview
An office list for React with Base UI, written for Portwise, a fictional global payroll company. The header states the office count and the headcount, both taken from the data, and names the largest office so the bars have a scale. Four rows follow, ruled from the column's edge: the city, a country code as text, the UTC offset, a bar as wide as that office is against the largest, and three role counts that add up to the office. The rows are the last thing in the block, so it ends under the last row. The page's rails and top rule come from the Guides spine, and a divider splits the header from the rows. It's built from Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should show where a company sits without a map or a flag. The offices and the counts are example data.
FAQ
How do I change the offices?
The offices are OFFICES at the top of the file. Each has a city, a code such as "PT", an offset such as "UTC+0" or "UTC−5" (a true minus, U+2212), and a roles array of { id, label, count }. The headcount of an office is the sum of its roles. The longest bar, the total and the largest city are computed from that, so nothing else needs editing.
How is a bar's length decided?
Every bar is a percentage of the largest office, rounded. Lisbon is the longest here, so its bar fills the track and the others are shorter by the same scale. The number at the end of the track is that office's headcount, and the role counts under it add up to the same number.
How is it read by a screen reader?
The heading is the section's only h2. The rows are a list labelled "Offices". The country code is a badge of text, not an image. The offset is read with "Time zone" in front of it. The bar is decorative, because the headcount is written beside it. The lines are drawn by a layer hidden from assistive technology.
Why is there no flag?
A flag is a picture of a country and a poor name for an office. The country is a two-letter code in a badge, next to the city, so it stays readable without a colour or an emoji.
How does it fit on a phone?
The header stacks above the rows, with a rule between them. Each row keeps the city and the offset on one line when they fit, and wraps when they do not. The bar stays one line. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the bar grows from the other side and the offset stays in Latin order.
Related
- Pro
Region Rows Data Centers About
Security and platformRegion rows for a bare-metal host: six regions in an accordion with a status dot and a capacity bar, each opening to its hardware, round trips to its nearest regions and audits.
- Pro
Team Breakdown Bars About
Team and officesA team counted three ways in 100% bars (by function, location and tenure), where choosing a segment in the legend names its share and count under the bar.
- Pro
City Cards About
Team and officesA snap row of tall city cards for a coworking company, with the city in large type, when the house opened, how many desks it holds, and whether it is hiring.
- Pro
Copyable Fact Sheet About
Press and recognitionA company fact sheet for a patient-records tool: six facts as a two-column description list in ruled rows, beside a boilerplate paragraph written from the same facts and a Copy button that puts it on the clipboard.
- Pro
Community Growth Chart About
NumbersA community's growth in one framed area chart, month by month for a year, beside three channel counts (forum, chat, office hours) that roll up as they scroll into view.
- Pro
Depth Table Integrations About
Security and platformAn integration depth table for a data-sync service: seven systems in plain type with direction, sync frequency, sign-in method and a state dot, in a framed, scrolling table.