shadcn.io is not affiliated with official shadcn/ui
Gallery Spotlight Team Block for React
Six 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.
Installation
Overview
A team section for React with Base UI, for Elmhurst, a lab-booking platform. One person fills a framed panel: a large initials plate, the name and role, a short quote, a bio and three figures in a description list. Under it a filmstrip of six avatars in a band that shares the rails picks who is in focus; the chosen avatar is ringed and carries a foreground underline, and the panel changes in place. Every person's panel is also drawn unseen in the same cell, so the block keeps its height whoever is chosen. On a phone the strip moves above the panel and scrolls sideways with the next avatar peeking. It's built from Tabs, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For about pages that want to put one person in the light at a time.
FAQ
How do I change the people?
Edit PEOPLE at the top of the file: a person is an id, a name, a specific role, a quote, a bio and three figures (a label and a value each). The strip takes as many people as the array holds; each avatar has a minimum width, so with more than six it scrolls sideways on every screen. Keep the quote to one sentence and the bio to two, or the panel grows.
How do I use it with a keyboard?
Tab goes to the chosen avatar; the Left and Right arrows move along the strip and choose as they go, and Home and End jump to the first and last. Each avatar is named by the person's name, and the panel under it is the tab's panel, a Tab stop of its own that is labelled by the avatar.
Why does the strip come first in the markup if it sits under the panel?
Tabs belong before their panel in the markup, so the strip comes first and the layout places it under the panel from md. On a phone the strip stays above the panel, so the choice is on the first screen.
Does the block move when I pick someone?
No. Every person's panel is drawn a second time, unseen and hidden from assistive technology, in the same cell as the open one, so the cell is as tall as the tallest panel. Only the open panel is read.
Related
- Pro
Spotlight Reel Team
Carousels and reelsSix 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.
- Pro
Centred Carousel Team
Carousels and reelsSeven people of a ceramics studio in a centred snap carousel: the middle card is full size and raised, its neighbours shrink and mute, and only the middle card is read and focusable.
- 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
Card Stack Team
Carousels and reelsSix people of a perfume subscription as a deck of overlapping profile cards in a framed figure, each card peeking 16 px under the one above, with Previous and Next buttons, a counter and only the top card focusable.
- Pro
Grid Cards Team
Grids and wallsTwelve people of a restaurant-software company in a hairline grid that runs from rail to rail, each an initials avatar with a name, a role, a department badge and a city, under a department picker that brings the picked team to the front and dims everyone else.
- Pro
Testimonials Speaker Switcher
Logos and facesA band of avatar-and-name chips for five customers: choose one and the large quote in a raised card in a card below changes to theirs, with arrow-key control between the chips, one scrolling row on phones, and a polite announcement of the change.