shadcn.io is not affiliated with official shadcn/ui
Stats Overview Team Block for React Aria
Four 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.
Installation
Overview
A team-in-numbers section for React with React Aria, written for Almondbury, fictional restaurant till software. A centred header states the headline, computed from the data ("142 people, 30 more than a year ago"). Under it two bands run from rail to rail and end the block. The first is four people figures (headcount, countries, average tenure, open roles) in cells that share their hairlines, each with its change on a year ago as an arrow and a sign. The second is a list of seven departments: a name, a bar and the department's headcount with its change. The bar is drawn in two weights of the foreground colour, what the department was a year ago at full weight and what it has added since in a lighter one, so the growth reads without a legend you have to decode (the legend is there anyway). The headcount, the title and every bar come from one typed list. Four figures across from lg, two by two below it; on a phone each bar drops under its department's name. It's built from Guides and your theme's tokens, with CSS transitions for the bars and the entrance. Every figure is about the team: business numbers belong to the stats blocks. The figures are example data.
FAQ
How do I change the departments and the figures?
Edit DEPARTMENTS and FIGURES at the top of the file. A department is a name, its people a year ago (before) and its people now (now). The headcount figure, the title ("142 people, 30 more than a year ago"), the change beside every department and the length of every bar are computed from that list, so adding a department needs no other change. Countries, tenure and open roles are typed figures with a reading from a year ago, from which their change is computed.
How should I read the bars?
Every bar is drawn against the largest department, so lengths compare across rows. The full-weight part is the people the department had a year ago, the lighter part is what it added since, and the number and arrow at the end of the row say the same in text. If a department shrinks, its bar shows only what is left, at full weight, and its change takes a minus sign and a downward arrow.
Why are there no green and red arrows?
A rise in headcount is not always good news, and a fall in open roles is not always bad news, so the block doesn't judge. A change is an arrow and a sign in the foreground colour, with a true minus sign so screen readers say "minus". The bars use two weights of the foreground colour, so the block follows any theme.
How is it read by a screen reader?
The four figures are a list, and each is a description list of its own: the label, the value and the change come in that order, with the value drawn above the label. The departments are a list, each with an h3 for its name and its numbers as text. The bars are drawn parts, hidden from assistive technology.