Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Capability Tabs About Block for React Aria

An about section for a quality-inspection company: vertical tabs of five capabilities, each with a proficiency bar, certification badges and one quoted outcome.

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 capability section for React with React Aria, written for Hallmarkly, a fictional quality-inspection practice for small factories. A short header sits over a master and detail: at the start a vertical list of five capabilities, each with its score in the margin; behind a divider that meets the band's top rule with a plus, the open capability as a title, a proficiency bar, certification badges and a quote with one outcome. An unseen copy of every panel holds the cell at the height of the tallest, so choosing one never moves the page. On a phone the list becomes a row of chips that scrolls sideways above the panel. The page's rails and top rule come from the Guides spine. It's built from Tabs, Progress, Badge and Guides, with a CSS entrance and your theme's tokens. The bar is your foreground colour, so this block has no primary control. For an about page that should show what a practice is good at, one capability at a time. The scores, certificates and quotes are example data.

FAQ

How do I change the capabilities?

The capabilities are SKILLS at the top of the file. Each has a short label for the tab, a title, a summary, a score from 0 to 100, a measure that says what the score counts, certs, a quote, a speaker, a role and an outcome. The bar and the "n of 100" line both read score. A new row becomes a new tab and a new panel. The first one, incoming, starts open.

How do the tabs work with a keyboard?

The list is a vertical tab list: the Up and Down arrow keys move between the capabilities, Home and End jump to the first and last, and Tab moves into the open panel. The open one is marked by a bar at the start of its row and by the row's selected state. On a phone the same tabs are chips in a sideways row, and the open chip is filled with your foreground colour.

Why doesn't the page move when I pick a capability?

The panels differ in length. An unseen, inert copy of every panel sits in the same grid cell as the open one, so the cell keeps the height of the tallest. The copies are hidden from assistive technology and from the keyboard. The open panel is the one in the tab.

How is the panel built?

The capability's title is an h3. The score is written as text ("94 of 100") and repeated by a progress bar that is hidden from assistive technology, so the number is announced once. Certifications are a list of badges. The quote is a blockquote and the speaker, role and outcome are its caption.

How does it fit on a phone?

The list becomes a single row of chips that scrolls sideways inside its own band, with the open chip filled in your foreground colour. The score moves out of the chips and stays in the panel. The panel sits under the chips. Nothing else scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header and the tabs fade up once when the page loads, and the open panel's text fades in when you choose another. With reduced motion the entrances are off and the panel swaps at once. Nothing loops.

All 150 about blocks