shadcn.io is not affiliated with official shadcn/ui
Team Members Carousel Block for React
A stage that shows one person at a time with a large initials avatar, role, department, bio and when they joined, over a rail of eight avatars that is the navigation and scrolls to keep the shown person in view.
Installation
Overview
Introduce a team one person at a time, with this team members carousel for React with Base UI. Crewfold, a shift-planning tool, shows eight people on a stage: a large initials avatar, the name, the role, a department word, a short bio and when they joined ("Joined in year 4"). Under the stage is a rail of eight initials avatars that is the navigation: the shown person is ringed, pressing an avatar shows that person, and the rail scrolls itself to keep them in view. The arrow keys step through from the rail or the stage, Home and End jump to the first and last, and a foot repeats the position ("Person 3 of 8") with Previous and Next Buttons. It is built from Carousel, Avatar, Badge, Button and Guides. The people, the roles and the bios are made up; no photos are used.
FAQ
How do I use my own people?
Edit MEMBERS. Each has an id, a name and its initials, a role, a department, a joined year of the company's life and a short bio. The rail, the stage and the status line all read the same list. To use pictures, put your image in the AvatarFallback's place with an AvatarImage and keep the initials as the fallback.
How does the rail follow the stage?
Both read one position. Pressing an avatar, Previous or Next, an arrow key or a drag of the stage changes it, and the rail then scrolls just enough to centre the shown avatar (it jumps, without animation, if you prefer reduced motion). A key press on the rail also moves focus to the new avatar.
How does it work with a keyboard?
Only the shown person's avatar is in the tab order, so Tab crosses the rail in one stop. The arrow keys move one person (mirrored in a right-to-left layout) and Home and End jump to the ends. People who are not shown are hidden from screen readers, and the polite line reads, for example, "Person 3 of 8, Solveig Marchetti, support lead". The stage is an Embla Carousel, and the rail is a plain scrolling list that follows its position.