Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Advisory Board About Block for React Aria

An advisory board for a legal-software company: five advisors in an accordion, each with the practices they cover, why they advise, and one piece of advice.

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

An advisory board for React with React Aria, written for Sagewood, a fictional case tool for small law firms. A compact header sits over five advisors in an accordion that runs from rail to rail. Each row shows initials, the name, how long they have advised ("Year 2", counted from the company rather than a calendar year) and the practices they cover. Opened, a row says why they advise Sagewood and quotes one piece of advice they gave. One row is open at a time, and the block ends on the last row so it does not draw a second rule above the next block. The page's rails and top rule come from the Guides spine. It's built from Accordion, Avatar, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should name the people a company calls before it ships a decision. The people are fictional and the quotes are example data.

FAQ

How do I change the advisors?

The advisors are ADVISORS at the top of the file. Each has a name, a since such as "Year 2", practices, a why and an advice quote. The initials are derived from the name. The first advisor starts open. Add or remove rows freely: the accordion and its last-row rule are drawn from the array.

How is it read by a screen reader?

The heading is the section's only h2. Each advisor is an h3 whose button opens the row, so the outline lists the five names. The practices are badges, the reason is a paragraph and the advice is a quotation. The initials avatar is decorative, because the name is written beside it. The lines are drawn by a layer 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 advisor's advice in the HTML?

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

How does it fit on a phone?

Each row keeps the avatar, the name and the practices, and the practices wrap. An opened quote sits under the reason, indented with the name. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the quote's rule moves to the other side.

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