shadcn.io is not affiliated with official shadcn/ui
Profile Drawer Team Block for React
Eight people of a design agency as rows that each open one side drawer with a quote, a bio and three career figures, with Previous and Next buttons that step through the team without closing the drawer.
Installation
Overview
A profile-drawer team section for React with Base UI, for Marwood & Pike, a design agency. A compact header sits over eight hairline rows that run from rail to rail and end the block; each row is a button with an initials avatar, a name, a role and a chevron. Pressing a row opens a side drawer with the person's quote, a short bio and a list of three career figures (years at the agency, projects led, people mentored). Previous and Next buttons inside the drawer move through the team without closing it, and a count says where you are. On a phone the drawer fills the screen width. It's built from Sheet, Data List, Avatar, Button and Guides, with CSS transitions and your theme's tokens for every colour. For team pages with more to say about each person than a row can hold. Names, quotes and figures are made up for the example.
FAQ
How do I change the people?
Edit PEOPLE at the top of the file. A person is an id, a name, a role, a quote, a bio and three numbers: years, projects and mentees. The rows, the drawer and its "2 of 8" count all read the same list, so adding someone needs no other change.
Is there one drawer or one per person?
One. The block keeps which person is shown in state, so pressing a row, Previous or Next only changes that person. The drawer's content updates in place, and a polite status line names the person and their place ("Sven Aldous, 4 of 8") for a screen reader.
Where does focus go when the drawer opens and closes?
Opening moves focus into the drawer. The rows are buttons with aria-haspopup="dialog". Closing, with Escape, the close button or a click outside, returns focus to the row of the person last shown, not to the row that opened the drawer: step to Next three times and close, and focus lands on that fourth row.
SheetContent takes finalFocus, a function that returns that row.
How does it work with a keyboard?
Tab moves from row to row and Enter or Space opens the drawer. Inside it, focus is held in the drawer: Tab cycles through the close button, Previous and Next. Escape closes it. Previous and Next wrap around, so neither is ever disabled while it has focus.
Related
- Pro
Accordion Profiles Team
Tabs and accordionsTen people of a recruiting-tool company as hairline accordion rows that run from rail to rail; opening a row shows the department, a two-line bio, a personal quote and two text links, one row at a time.
- Pro
Hover Reveal Team
Lists and directoriesSix people of an architecture practice as a bare list of names and roles; hovering or focusing a row opens a hover card with the bio, base city and previous studios, and every row is also a link to the profile.
- Pro
Grid Reveal Team
Grids and wallsEight people of a vet-booking tool in a hairline grid where picking a cell opens a full-width band right under its row: a quote, two skills and what to ask the person about, with the picked cell marked by a bar.
- Pro
Flip Cards Team
Grids and wallsFour people of a florist network as cards that turn over in 3D on a button press: the front is initials, a name and a role, the back a quote and two things to ask them about; reduced motion cross-fades.
- 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
Alumni Tenure Table Team
Lists and directoriesA table of alumni with the role they had, a tenure bar on a 0 to 8 year axis and the company they are at now, beside three figures counted from the list: alumni, companies and median stay.