shadcn.io is not affiliated with official shadcn/ui
Representation By Level About Block for React
A representation section for a hiring company, with paired bars for the company and its leadership, the gap written out, and the hiring changes still in force.
Installation
Overview
A representation section for React with Base UI, written for Equalis, a fictional hiring tool that reports its own workforce. At the start, four groups each show the share of the company beside the share of leadership, as a bar and a percent, with the gap in a sentence computed from those two figures. Behind a divider, three hiring changes that are still in force, each dated from the company's own years. On a phone the bars come first and the changes stack under them. 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 who works somewhere and who leads it. The groups overlap, the figures are example data, and a person can be counted in more than one.
FAQ
How do I change the groups and the changes?
The groups are GROUPS and the changes are INITIATIVES, both at the top of the file. A group has a name, a company share and a leadership share. A change has a title, a detail and a year counted from the company ("Year 2"), never a calendar year. The heading's group count and the changes' count are the lengths of those arrays.
How is the gap written?
Leadership's share minus the company's share. A negative difference reads "trails by N points", a positive one "leads by N points", and a zero reads "Leadership matches the company." The sentence and the bar lengths come from the same two numbers.
How is it read by a screen reader?
The section has one h2. Each group is an h3, then the two shares as text with their percents, then the gap sentence. The bar fills are decorative. The changes are an ordered list, and each "Since Year N" badge is text. The rails and the divider are hidden from assistive technology.
Do the shares add to 100?
No count is a partition. The introduction says a person can be in more than one group, so the percents are shares of the company and of leadership, not slices of one whole.
Related
- Pro
Benefits About
CareersA payroll company's own benefits, switched by office: four columns for Health, Money, Time and Growth, with the wording swapping in place and a row of figures underneath.
- 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
Day Track Hiring Process
CareersA hiring process section for an applicant tracking company's own about page: five stages drawn to scale over fourteen days, five cells saying what to expect at each, and a promise to reply within two days.
- Pro
An onboarding process section for an HR company's own about page: a live checklist for the first 30 days, grouped by week, with a running count and bar, a tip from your buddy for each week, and ticks that stay on this page for this visit.
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.