shadcn.io is not affiliated with official shadcn/ui
Spotlight Reel Team Block for React
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.
Installation
Overview
A team section for React with Base UI, 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.
Related
- Pro
Gallery Spotlight Team
Carousels and reelsSix people of a lab-booking platform as a gallery: one person in a framed panel (an initials plate, name, role, quote, bio and three figures) over a filmstrip of six avatars that picks who is in focus.
- Pro
Leadership Spotlight Team
Leaders and org chartsOne leader as a split band, a large initials plate with a three-paragraph bio and three figures, over four executives in cells with overshoot, each with a one-line background and expertise chips that wrap.
- Pro
Lens Roster Team
Culture and valuesSix people of a pension app in rows rail to rail, with a Why I joined or Why I stay picker that swaps every row's one-line answer at once while names, roles and tenures stay put.
- Pro
Vertical Tabs Lessons Learned
TimelinesA lessons-learned section for a retrospectives tool: a vertical tab list of six post-mortems with the year each happened, and the open one as what happened, what we learned and what changed.
- Pro
Category Rail Detail Panel Features
Tabs and accordionsA features section for a knowledge base as a working tree: a rail of three categories and six features beside a detail panel with the selected feature's sentence, three ticks and a small drawing.
- Pro
Department Quote Wall Team
Culture and valuesFour departments of a farm-lease marketplace as bands: each names its department and headcount at the start and gives one display quote from someone in it at the end, split by a solid divider.