shadcn.io is not affiliated with official shadcn/ui
Lens Roster Team Block for React
Six 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.
Installation
Overview
A team section for React with Base UI, for Cinderhall, a pension app. Under a compact header whose end carries a two-way picker, Why I joined or Why I stay, six rows run from rail to rail. Each row is an initials avatar, a name, a specific role, one short answer and the person's tenure beside it, so the two answers read differently. Switching the picker changes every answer at once and a polite line says which question is showing. Both answers are always drawn in the row, one unseen, so the rows keep their height. On a phone the picker sits under the heading and the tenure moves up beside the name. It's built from SegmentGroup, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. The people and answers are examples.
FAQ
How do I change the people and the answers?
Edit PEOPLE at the top of the file: a name, a role, a tenure ("Year 3", never a calendar year) and the two answers, joined and stay. To change the questions, edit LENSES and the two reads in summaryOf; keep each answer to one line on a desktop.
How does the picker work?
It is a segmented control with two options: the arrow keys move between them and choose, and it reports the chosen option. Both answers are in every row; the one not shown is invisible and hidden from assistive technology, so only the chosen answer is read.
How is a row marked up?
A figure per row, with a figcaption that holds the name in an h3 and the role, then a blockquote with the answer, then the tenure.
Do the rows move when I switch?
No. The two answers share one grid cell, so each row is as tall as the taller answer.
Related
- 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.
- Pro
Cohort Slider Team
Culture and valuesForty-three people of a payroll service by the year they joined: a slider labelled The year you joined, a group of avatars for who came that year, and two quotes from that year in cells split by a hairline.
- 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.
- 0102030405Pro
Numbered List Team
Lists and directoriesSixteen people of a plant-care app as an ordered list in the order they joined, each row an employee number in tabular figures, an initials avatar, a name, a specific role and a company-relative join year.
- 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
Compact List Testimonials
Rows and listsTwelve one-line customer quotes for a field-reporting app in a fixed-height scroll area inside one hairline band, each row a disclosure that opens in place to the full quote, with a ruled count footer and a Shine Button.