shadcn.io is not affiliated with official shadcn/ui
Flip Card Testimonials Block for Radix UI
Three testimonial cells in one hairline band that flip in 3D from a short quote to the results behind it, one open at a time, each driven by a toggle button.
Installation
Overview
A band of testimonial cells that turn over, for React with Radix UI. A compact header holds the one Shine Button; below it, three cells share their dividing hairlines between the page's rails, with plus marks on the band's corners. The front of each cell is one short, strong sentence with its speaker, a support lead at a team using Tandem Desk, a shared inbox; the back is the numbers behind it: two results and a line about who said it and how long they've been a customer. A toggle button at the foot of every cell turns it, and only one cell is turned at a time, so opening a second sends the first back to its quote. The turn is a real 3D rotation done with CSS transforms and a transition, both faces share one grid cell so a cell is as tall as its taller face, and the lines around it never move. On a phone the cells become a snap carousel with the next one showing. It's built from Toggle, Avatar, Shine Button and Guides, with your theme's tokens; a turned cell's toggle is filled with your text colour, so the Shine Button stays the only primary element.
FAQ
How does the flip work?
Each cell is a wrapper with perspective around a transform-3d element holding two faces. The back face is already rotated half a turn and both use backface-hidden, so only one shows. Pressing the toggle adds rotate-y-180 to the wrapper, which a CSS transition animates. The toggle sits outside the turning element, so it never moves and keeps keyboard focus while the cell turns. The hairlines between cells belong to the list, not the faces, so they stay put.
Why is only one cell open at a time?
The block keeps one open id in state. Pressing a toggle sets it to that cell, or clears it when that cell is already open, and every toggle's pressed state follows from it. To let several cells stay open, keep a list of ids instead and check includes.
How do keyboards and screen readers use it?
The toggle is a real button with a pressed state: Tab reaches it, Space or Enter turns the cell, and it reads as "See the results behind Dalia Mansour's quote, toggle button, pressed". The face that isn't showing is inert and hidden from assistive technology, so only one face is ever read or focusable. A polite status line says which side is showing after each press, and says nothing on load.
What happens with reduced motion?
The transition is switched off, so the cell changes face at once with no rotation. Nothing else on the page animates after the first fade-in, which is also off.
Where do the figures come from?
They're typed in STORIES: each cell has a list of results, each a figure and a label, plus the relative tenure. They're fictional, so replace them with your customers' real, approved numbers. Keep each figure short ("−41%", "6 min"); the back face is as tall as the longest cell. Figures sit in a bdi, so signs and units stay in order in right-to-left languages.
How does it fit on a phone?
Below the md breakpoint the cells form a horizontal snap carousel: each takes 85% of the width, so the next one shows at the edge, and every cell keeps its toggle at the foot, which is also what lets the keyboard reach the carousel. Nothing has a fixed height, so a long quote just makes its cell taller.