shadcn.io is not affiliated with official shadcn/ui
Diversity Stats Team Block for React
Three tabs (Gender, Background, Region), each a framed stacked bar of the whole team with a legend of shares and the change in points since a year ago; prefer not to say is drawn hollow.
Installation
Overview
A team-diversity section for React with Base UI, written for Corrigan & Holt, a fictional hiring analytics tool that publishes its own numbers first. A start-aligned header says how many people are counted "the way they describe themselves", and a band of three tabs with a sliding underline picks the view: Gender, Background or Region. Each view is a framed stacked bar of the whole team in foreground weights, with a 0 to 100 ruler under it, and a legend list under that: each category's name, its people, its share and the change in percentage points since a year ago, as an arrow and a sign. "Prefer not to say" is always a category and is drawn hollow, so it is never mistaken for a missing number. Shares are rounded by the largest remainder so each bar adds up to 100, and all three views count the same people. The three panels share one height, so switching tabs never moves the page; the bar sweeps in each time a panel opens. It's built from Tabs, Guides and your theme's tokens. The categories and numbers are example data, not advice on how to report diversity: ask your own people how they want to be described.
FAQ
How do I change the categories and the numbers?
Edit VIEWS at the top of the file. A view is a name and a list of categories, each with its people now and a year ago; mark one unstated to draw it hollow as "prefer not to say". Every view must add up to the same headcount, because the header counts the first. Shares, changes, the bar's weights and the legend come from the list.
Why self-described categories and a prefer-not-to-say answer?
People describe themselves in more ways than a form's checkboxes, and some would rather not say. The block counts every answer as an answer: "Self-described" and "Prefer not to say" are categories in the bar and the legend like any other, and the hollow segment says the answer was given, not lost. Replace the example categories with the ones your own people chose, and check them with the people they describe.
Why do the shares always add up to 100?
Each share is rounded by the largest remainder: round every share down, then give the missing points to the categories with the biggest fractions. The change since a year ago compares those rounded shares, so it is a whole number of points, written with an arrow and a sign.
How do the tabs work with a keyboard?
Tab moves into the tab list; the arrow keys move between the three tabs, and the underline slides to the selected one, which opens its panel. The bar is a drawing, hidden from assistive technology; the legend is a list that says everything the bar shows.
Why doesn't the page move when I switch tabs?
All three panels are drawn once, unseen, in the same grid cell as the live one, so the tallest sets the height. The copies are hidden from assistive technology and can't be focused.
How does it fit on a phone?
The tabs share the band, which scrolls sideways if they don't fit. The legend keeps the swatch, the name, the share and the arrow with its sign; the people counts and the "pts" unit are left out of the visible text (screen readers still read the unit), so a long category name can wrap.
Related
- Pro
Stats Overview Team
Numbers and historyFour people figures with their change on a year ago, over seven department rows whose bars draw what each department was a year ago and what it has added since.
- 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
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
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
Stacked Bar Chart Stats
Bar and columnTwelve weeks of support tickets stacked by priority in three foreground weights, with toggles that double as the legend: switch a priority off and the stack, the scale and every total re-read.
- Pro
Donut Breakdown Stats
Parts of a wholeA budgeting app's month of spending as a framed donut with its total rolling up in the middle, beside a legend of five buckets with amount and share, the shares adding up to exactly 100%.