shadcn.io is not affiliated with official shadcn/ui
Grid Reveal Team Block for React Aria
Eight people of a vet-booking tool in a hairline grid where picking a cell opens a full-width band right under its row: a quote, two skills and what to ask the person about, with the picked cell marked by a bar.
Installation
Overview
A team section for React with React Aria, for Stockleigh, a booking tool for veterinary clinics. A start-aligned header sits over a grid of eight people that shares its hairlines and runs from rail to rail. Each cell is a button with an initials avatar, a name and a role. Picking a person marks their cell with a bar and opens a band across the full width under their row: their tenure, a quote, two skills and what to ask them about. One person is always open, so the block keeps its height; the first is open when the page loads. Arrow keys move between cells. Four columns from lg, two below, and on a phone the band opens under the tapped row. It's built from Avatar, Badge and Guides, with a CSS fade and your theme's tokens for every colour. For team pages that want every person's story without eight accordions.
FAQ
How do I change the people?
Edit PEOPLE at the top of the file. A person is a name, a role, a tenure ("Year 4": never a calendar year), a quote, two skills and an ask phrase. Eight fills two rows at four columns and four rows at two. If you change the count, keep the last row in mind: LAST_ROW_START works out where it starts so that the rule under the last row only shows when the open band sits there.
How does it work with a keyboard and a screen reader?
Tab moves to a cell, the arrow keys move focus between cells (they follow the page's direction, so they flip in a right-to-left layout), and Enter or Space opens that person. Each cell says whether it is open (aria-expanded) and which band it controls (aria-controls), and a polite line says whose bio is open. In reading order the band comes after the eight cells; aria-controls ties it to the cell that opens it.
How does the band open under the right row?
The grid has no gaps, and each cell and the band sit in a grid row of their own: people in the odd rows, the band in the even row under the picked person's. Each element carries its rows for both column counts as CSS variables, so the browser places it with no measuring and no script, and an empty row collapses to nothing. COLUMNS holds the two column counts and must match the grid's classes.
Why is one person always open?
Closing the band would move everything below the block, and a block that changes height on every click is hard to read. Picking another person moves the band and keeps its height about the same; keep quotes to about the same length so it does.
How are the lines drawn, and how does the block end?
Each cell draws its end and bottom borders, except the last column's end (the page's rail draws that) and the last row's foot, which the next block's top rule closes. The band draws its foot too unless it is under the last row, and its top corners carry the + marks where it meets the rails.