Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Flip Cards Team Block for React Aria

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 React Aria. 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.

All 126 team blocks