Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Flip Cards Team Block for React

Four 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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A flip-card team section for React with Base UI. A compact header sits over four cells set apart with overshoot lines, each holding a card that turns over. The front is an initials avatar, a name and a role; the back is a short quote and two things to ask that person about. Each card is a real button with aria-pressed, so a click, a tap, Enter or Space turns it, and it turns back the same way. Two columns on a phone. Under reduced motion the card does not turn: the two faces cross-fade instead, and it still works. It's built from Avatar and Guides with CSS 3D transforms and your theme's tokens for every colour, for Cresthaven, a florist network. For team pages that want one memorable moment per person. Names and quotes are made up for the example.

FAQ

How do I change the people?

Edit PEOPLE at the top of the file. A person is a name, a first name, a role, a short quote and two asks. Keep quotes under about 70 characters: the card has a fixed height, so a long quote won't fit on the back, especially in two columns on a phone.

How does the turn work?

Each card has two faces stacked in one box. The box rotates 180 degrees on the Y axis when the button is pressed; each face hides its back side, so only one shows. The turning box is never faded, because opacity on a 3D parent flattens it: any opacity sits on the faces.

What happens with reduced motion?

The card doesn't turn. Both faces lie on top of each other and swap opacity over 200 milliseconds, so the card still flips and the content still changes, without a spinning card.

Is it usable with a keyboard and a screen reader?

Yes. Each card is one button named "Flip Noor Haddad's card", with aria-pressed telling the side that is showing. Tab moves card to card, and Enter or Space turns it. The faces are decorative; the name, role, quote and topics are in the page as real text for a screen reader whichever side is up, so nothing hides behind the turn.

How are the cells drawn?

Each card sits in its own cell with Guides overshoot lines and + marks at its corner, set apart by a gap so neighbouring lines never touch. The grid is inset from the page's rails and the block keeps the standard bottom padding.

How does it fit on a phone?

Two columns, with slightly shorter cards and smaller text. All four people show, so there is no Show all button, and nothing scrolls sideways at 320 pixels.

  • Pro

    Hover Reveal Team

    Lists and directories

    Six 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

    Accordion Profiles Team

    Tabs and accordions

    Ten 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

    Department Bento Team

    Grids and walls

    The six teams of a school-transport operator as a bento of cells that stand apart: the drivers fill a two-by-two cell with a large headcount and a group of avatars, and every other team has a headcount, a lead and a line on what it owns.

  • Pro

    Profile Drawer Team

    Lists and directories

    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.

  • Pro

    Grid Cards Team

    Grids and walls

    Twelve 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

    Highlight Filter Team

    Grids and walls

    Eighteen people of an event-ticketing company on a dense wall of hairline cells, with department chips that dim everyone outside the selection in place, so nobody moves and the wall keeps its height.

All 126 team blocks