Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Spotlight Reel Team Block for React Aria

Six people of a seed-saving cooperative as master and detail: a vertical list of names and roles at the start, and at the end the chosen person as type, with their words at display size, a bio and two figures.

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 team section for React with React Aria, for Salterton, a seed-saving cooperative. A vertical list at the start holds six people, each an initials avatar, a name and a role, with a foreground bar on the chosen row. A solid divider, which meets the top rule at a plus mark, separates it from the profile at the end: the person's own words at display size, a short bio and two figures. Every profile is also drawn unseen in the same cell, so choosing someone never moves the page. On a phone the list becomes a row of name chips that scrolls sideways above the profile. It's built from Tabs, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For a short team whose members have something to say.

FAQ

How do I change the people and the figures?

Edit PEOPLE at the top of the file: a person is an id, a name, a role, a quote, a bio, a tenure ("Year 4", never a calendar year) and two stats. Six rows is what the list was drawn for; a longer list scrolls with the page, not inside the block.

How do I use it with a keyboard?

The list is a vertical tab list: Tab goes to the chosen name, the Up and Down arrows move along it and choose as they go, and Home and End jump to the ends. On a phone the list is drawn as a row of chips but keeps its vertical orientation, so Up and Down still move between names.

How does it fit on a phone?

Below lg the list is a row of name chips that scrolls sideways, the chosen chip filled, with a rule above and below it; the avatars and roles are hidden, and the profile is under the chips.

Does the block move when I pick someone?

No. Each profile is drawn a second time, unseen and hidden from assistive technology, in the same cell as the open one, so the cell holds the tallest profile's height.

Is the quote a real blockquote?

Yes: a figure holds a blockquote and a figcaption with the first name and tenure. The quotation marks are drawn around the text and hidden from screen readers.

Do all seven targets behave the same?

Yes. The chosen row's bar is its own border and appears without sliding. Only the open profile is in the page on Radix, Base UI and React Aria; the unseen copies are for sizing only.

All 126 team blocks