React Team Section Components
ReactFrame has 5 React components for team and about pages (1 free): numbered lists with expandable bios, a grid that opens full bios in a drawer, profile flip cards, a coverflow team carousel and photo grids. They output schema.org Person data for your team.
How to choose
- Small teams with personality: profile-flip-card or team-cards-expand.
- Larger teams: team-drawer or meet-the-team.
- Editorial about pages: team-list.
All 5 components
- Team DrawerPremium
- A team grid where clicking a card opens a full-bio side or bottom drawer with tags, socials, and keyboard navigation between members.
- Team ListPremium
- A numbered team list with expandable bios, a ghost-reveal name animation, an optional portrait, and social links.
- Profile Flip CardFree
- A profile card that flips from a photo front to a bio back on click or hover, with flip Y, flip X, spring, or fade transitions.
- npx shadcn@latest add https://reactframe.com/r/profile-flip-card.json
- Team CarouselPremium
- A centered coverflow-style team carousel with scaled/faded side cards, drag, keyboard navigation, autoplay, and dot/counter indicators.
- Meet the TeamPremium
- A wrapping grid of team member photo cards with edge blur masks, a bottom gradient scrim for name/title legibility, hover shimmer sweep, and staggered entrance.
Questions
- Can I link team members' social profiles?
- team-drawer and team-list take social links per member, and include them in the structured data as sameAs; the others focus on photo, name and role.
- Are these components free?
- 1 of the 5 are free (Profile Flip Card); the others are premium and included in All-Access.
- How do I install them?
- Free components install with the shadcn CLI, for example: npx shadcn@latest add @reactframe/<slug>. You get the full React + Tailwind source in your project, with Motion as the only animation dependency.
Related collections
Want a whole page built from these? Ask your AI to build it with ReactFrame.