Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Behind the Scenes About Block for React Aria

One Tuesday at a theatre-software company, by department: an accordion of Support, Infrastructure and Design, each with that day's numbers, tools and an honest note.

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 Tuesday behind the scenes for React with React Aria, written for Greenroom, a fictional company that runs the show file for regional theatres. A compact header sits over three departments in an accordion ruled from rail to rail. Each row names the department and what that room is for. Opened, it shows three figures from one Tuesday, the tools on the desk as badges, and one sentence about the part still done by hand. One row is open at a time, and the block ends on the last row. The page's rails and top rule come from the Guides spine. It's built from Accordion, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should show a company at work without a photo. The Tuesday and its figures are example data.

FAQ

How do I change the departments?

The departments are DEPARTMENTS at the top of the file. Each has a name, a line, a list of facts (a label and a value), tools and a note. The first department starts open. Add a fact and the opened row gains a column on a wide screen and a stacked line on a phone.

How is it read by a screen reader?

The heading is an h2. Each department is an h3 whose button opens the row. The opened figures are a description list, the label first and then the value, so "Tickets closed, 46" reads as a pair. The tools are a list of badges. The note is a paragraph after them. The lines are hidden from assistive technology.

How does the accordion work for a keyboard?

Enter or Space opens a row, and opening one closes the open one. Tab moves between the rows' buttons; this base does not add arrow-key movement between them.

Is a closed department's Tuesday in the HTML?

Yes: a closed row's figures, tools and note stay in the page, hidden until you open the row or find-in-page reaches them.

How does it fit on a phone?

The three figures in an opened row stack in one column, and the tools wrap. The block ends on the last row, with no rule under it, so it joins the next block's top rule. Nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header and the rows fade up once on load, and a row opens with a short height transition. The height transition of a row does not yet stop under reduced motion on this base. The block has no autoplay and nothing loops.

All 150 about blocks