Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Representation By Level About Block for React Aria

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A representation section for React with React Aria, 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.

How does it fit on a phone?

The bars stay full width under the heading, and the changes sit under a rule with plus marks. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the percents stay at the end of each bar.

What moves, and what happens with reduced motion?

The heading fades up once when the page loads. The bars are still. With reduced motion the entrance is off.

All 150 about blocks