Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Layered Quote Deck Testimonials Block for React

A deck of four customer quote cards in a framed figure under a centred header: the front card sits on two peeking cards, and the Shine Button sends it to the back so the deck cycles.

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

Put customer quotes in a deck. Under a centred header, four quote cards from teams using Waypost, a fictional roadmap tool, are stacked like paper inside a figure drawn with hairlines and + marks on its corners: the front one is in full view, with the edges of the next two peeking out below it. Press Next, the one filled Shine Button, and the front card slides to the back of the deck while the one behind it comes forward; an outline Previous brings it back, and a "2 of 4" count sits between the buttons. Each card is a Card with a quote mark, a tenure Badge, the quote and an Avatar with the author's name and role. It uses Button, Guides, Lucide icons, CSS transitions only and your theme's tokens. For landing pages and pricing pages that want a handful of quotes in one small, tidy place.

FAQ

How do I change the quotes or add more?

Edit the TESTIMONIALS array at the top of the file: each entry has an author, role, company, two-letter initials, a tenure line for its badge and the quote, written with real curly quotation marks left to the markup. The count, the cycle and the card positions all follow the length of the array. The deck always shows the front card and two peeking ones, so two to six quotes read best.

How does the deck work?

Every card sits in the same grid cell, so the tallest quote sets the deck's height and nothing moves when you switch. Each card's place is its distance from the front: the front card is flat, the next two are nudged down and scaled in, and the rest wait out of sight behind them. Pressing Next gives the front card the last place, which is how the deck cycles. It's a single CSS transition on position, size and opacity, with no dragging and no autoplay.

Can visitors use it with a keyboard and a screen reader?

Yes. Previous and Next are real buttons, and the cards behind the front one are inert and hidden from assistive technology, so Tab never lands on them and only the front quote is read. After a visitor presses a button, a polite live region says "Quote 2 of 4" and the author's name; nothing is announced on load. Each card is a figure with a blockquote and a figcaption, and the quote sits in a bdi so its quotation marks stay put in right-to-left languages.

Is Next the only primary button?

Yes. Next is a Shine Button, the block's only filled control, and Previous is an outline Button. Both are real buttons that act on the page, not links, so nothing needs a different setup per library beyond how each one names its press handler: onClick on Ark, Base UI and Radix, onPress on React Aria.

What changes when a visitor prefers reduced motion?

The cards swap places at once, with no sliding, scaling or fading, and the Shine Button's light fades in instead of sweeping. The deck never moves on its own, so there's nothing to pause.

Does it work in right-to-left languages?

Yes. The caption follows the reading direction, the chevrons on Previous and Next mirror, and the quotation marks stay with their sentence. The cards peek out below the deck, which is the same in both directions.

  • Pro

    Stack Overlap Scroll Testimonials

    Rows and lists

    Quotes from teams on a developer platform that pile up as you scroll: each note is a full-width band between the rails with its own top rule and + marks, every band sticks near the top and the next slides over it, leaving each covered band's name strip visible. A Shine Button sits in the header.

  • Pro

    Triple Stack Vertical Carousel Testimonials

    Carousels and decks

    A vertical carousel with three customer quotes in view: each press of the up or down button moves one row, with a count of which quotes are showing.

  • Pro

    Rotating 3D Wheel Testimonials

    Carousels and decks

    A 3D wheel of customer quotes in a framed figure under a centred header: the active quote faces you flat while its neighbours tilt away above and below, and up and down buttons in a footer strip turn the drum.

  • Pro

    Quote Carousel Testimonials with Next-Speaker Preview

    Carousels and decks

    A centred, looping carousel of large customer quotes in a card in a card, whose Previous and Next buttons preview who speaks next, with the neighbour's avatar and first name.

  • Pro

    Centered Stacked Cards Deck Hero

    Product windows

    A centred showcase hero for a reporting workspace: the headline and a Shine Button, then a band between the rails with a fanned deck of three app windows (Dashboard, Analytics, Reports) that runs off its foot, masked.

  • Pro

    Stacked Cards Pricing

    Plan cards

    A fanned deck of plan cards for a flashcard app: the chosen plan's card in front with its price, button and features, the other two peeking out behind, brought forward by a tab list.

All 100 testimonials blocks