shadcn.io is not affiliated with official shadcn/ui
Flip Card Testimonials Block for React
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 Base 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.
Related
- Pro
Bento Grid Testimonials
Quote gridsA quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.
- Pro
Pin a Quote Testimonials
Expand, flip, pinFour quote rows in a ruled list with Pin toggles: the pinned quote moves up into a large featured card, a raised panel in a tinted shell with + marks, split from the list by a solid divider, under a compact header with a Shine Button.
- Pro
Elastic Column Testimonials
Quote gridsThree long stories from Fieldnote's customers in elastic columns inside one framed figure: the story you hover or focus widens while the others give way, and each clamped quote opens in full.
- Pro
Mosaic Testimonials
Quote gridsA checkerboard of monogram portrait tiles and quote tiles in cells that share their hairlines, each quote beside its speaker and the second row swapped, under a compact header with a Shine Button.
- Pro
Flip Reveal Cards Pricing
Plan cardsThree plan cards for a fitness coaching app that flip in 3D: a short front with the price, the call to action and three headline features, and a back with the full list and the plan's promise. A snap carousel on phones.
- Pro
Split Panel Counter Stats Grid CTA
Figures and statsA reverse split call to action: a two by two grid of ruled stat tiles that turn over in 3D to show how each figure is measured, beside the copy, a Shine Button and an outline button.