shadcn.io is not affiliated with official shadcn/ui
Lens Roster Team Block for React Aria
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 React Aria, 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.