shadcn.io is not affiliated with official shadcn/ui
Counted Hiring Bands Team Block for React Aria
The open roles of a freight marketplace as figures and bands: three figures that roll up once on view, then one rail-to-rail band per department with its count, a share bar and its roles.
Installation
Overview
A hiring overview for React with React Aria, for Brackenhurst, a freight marketplace. A centred header says how many roles are open; under it a band of three figures between hairlines (open roles, teams hiring, weeks to an offer) rolls up from zero once, when it scrolls into view. Then come the departments, one band each, rail to rail: its name and a count at the start, a fine bar showing that team's share of the hiring, and its roles at the end, each with where it is based. The first two figures are counted from the roles, so adding a role changes both and the bars. The last band ends the block. On a phone the three figures stay in a row and each band stacks. It's built from Sliding Number, Badge and Guides, with CSS transitions and your theme's tokens for every colour. For careers pages that want to show a company is growing, and where. The roles are invented.
FAQ
How do I change the roles and teams?
Edit DEPARTMENTS at the top of the file: each department has an id, a name and its roles (a title and a location). The open-roles figure, the teams-hiring figure, the count beside each name and each share bar are counted from that list, and so is the sentence under the title. WEEKS_TO_OFFER is the one figure you set by hand.
How do the figures count up?
Each is a Sliding Number set to roll up from zero once, when it scrolls into view; it never replays. Under reduced motion it shows the final value at once. Each figure sits in a bdi that keeps its width, so nothing around it shifts while it rolls. A stack screenshot taken without scrolling shows zeros: the numbers only start when the band is on screen.
What do the bars under the department names mean?
Each is that team's share of the biggest team's open roles, so the largest department has a full bar. They're decoration: the count is in the text beside the name, and the roles are listed in the band, so a screen reader hears "Engineering, 4 roles" and then the four. No bar carries information by colour.
How is it marked up?
The figures are a description list (a label and a value each). Every department is a labelled section with its name in an h3 under the block's h2, and its roles are a list named after the department.
How does it fit on a phone?
The three figures stay side by side, one third each, and their notes drop away. Each department band becomes a column: the name, count and bar first, then the roles one per row. Nothing scrolls sideways at 320 pixels.
How are the lines drawn, and how does the block end?
The figures band and the department bands each draw their top rule, with + marks, from Guides; hairlines between bands come from divide-y. The last band draws no bottom rule and the column has no bottom padding, so the next block's top rule closes the block.