shadcn.io is not affiliated with official shadcn/ui
Team Avatar Strip About Block for React
A compact about strip for an HR tool: overlapping initials, the headcount, a department bar that names a segment on hover, focus and tap, and a hiring line.
Installation
Overview
A team strip for React with Base UI, written for Teamwick, a fictional HR tool. A short start-aligned header sits over one band: an overlapping pile of initials, the headcount, a segmented bar of departments, and "Hiring: 5 open roles" with a Status dot. The bar's segments are the department counts, so they sum to the headcount exactly. Hovering, focusing or tapping a segment writes that department and its count under the bar; a tap sticks until the same segment is pressed again. The page's rails and top rule come from the Guides spine, and the band ends the block. It's built from Avatar, Status and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that has to say how big the team is and where people sit, in one strip. The departments, the pile and the open roles are example data.
FAQ
How do I change the team?
Departments are DEPARTMENTS: a name and a count. The headcount is the sum of the counts, and each segment's width is that count, not a rounded percent. The pile is PILE; the chip is the headcount minus the pile. Open roles are OPEN_ROLES, and the hiring line uses the length. At rest the line names the largest department, which is derived the same way.
How is it read by a screen reader?
The heading is the section's only h2. The pile is a list: each avatar is decorative and the name beside it is read, and the chip says how many people are not in the pile. Each segment is a button named "People ops, 18 of 64" (the name and the count from the data). The line under the bar is visual and is not a live region, because the button already carries the name. The status dot is hidden; the hiring sentence, including the role names, is text. The lines are drawn by a layer hidden from assistive technology.
How does a segment get its name?
Hover, keyboard focus or a tap writes the department under the bar. A tap presses the segment so the name stays; press it again and the resting line returns. Moving from one segment to another does not clear the one you just entered. Focus wins over hover, and hover wins over a segment that is held. The buttons are native buttons, so this is the same on every base.
What does the hiring line count?
OPEN_ROLES.length. The dot is a success Status and it does not carry meaning on its own: the sentence does. The role names are in the sentence for assistive technology and are not repeated as a second list.
How does it fit on a phone?
The pile, the headcount, the bar and the hiring line wrap onto as many rows as they need. The bar stays at least a short field wide, and each segment is at least 24 pixels tall. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the pile overlaps toward the start and the bar runs in reading order, first department first.
Related
- 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
Headcount Stacked Chart About
Team and officesHeadcount over six years as stacked columns by department, where choosing a year (focus, hover or tap) lists its departments with counts and shares.
- 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
Repo Cards Open Source About
Press and recognitionThree repository cards for a developer toolkit, drawn like repo headers: owner and name, a description, a language letter, rolling star counts, forks, contributor initials and latest release, with a used-by line.
- Pro
Counters Row About
NumbersFour counters for an uptime monitor in one hairline band, each rolling up once on view with an arrow and a sign for how it moved on last month, under a header that says when the figures were last updated.
- Pro
By The Numbers Bento About
NumbersAn asymmetric bento of company figures for an expense tool: a lead cell with the customer count over a twelve-bar trend, and five smaller cells tagged People, Customers or Product, each footnoted with how it was counted.