Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Dialog Reader Testimonial Grid Block for React

Six customer quotes for a shared-inbox product as cards that share their hairlines, each cut to three lines; each opens one reader dialog with the whole quote, Previous and Next and a counter.

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 testimonial grid for React with Base UI, written for Replyloop, a fictional shared inbox for small support teams. Under a centred header, six cards sit in a three-by-two grid that shares its hairlines, runs from rail to rail and ends the block: one column on a phone, two from sm and three from lg. Each card cuts its quote to three lines and shows who said it and "Read in full". The card is a button that opens one reader dialog with the whole quote, the person, a "2 of 6" counter, Previous and Next, and the arrow keys, Home and End. Closing the reader returns focus to the card of the quote last read, not the one that opened it. It's built from Guides, Dialog, Avatar and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages and landing pages with long quotes that deserve their full length. The people, companies and quotes are example data.

FAQ

How do I change the quotes?

QUOTES holds six cards, each with a quote, name, role, company and id. Keep a multiple of six so the grid fills every row at one, two and three columns. A quote is cut by CSS (line-clamp-3), so the whole text is always in the card and in the reader.

How does the keyboard work?

Tab reaches each card; Enter or Space opens the reader, with focus on its close button (on React Aria, the dialog itself). Inside, Left and Right (mirrored in a right-to-left layout), Home and End step through the quotes, Tab cycles between Close, Previous and Next, and Escape closes it.

Where does focus go when the reader closes?

To the card of the quote you last read. If you opened the third card and stepped to the fifth, closing puts focus on the fifth, so you keep your place in the grid.

What does a screen reader hear?

A card is a button named by its quote, its person and "Read in full", announced as opening a dialog. In the reader the person's name is the dialog's title and their role is its description; a polite line reads "Quote from Mina Okafor, 2 of 6" as you step.

How does it fit on a phone?

The cards stack in one column; each is tall enough to be an easy target. The reader is a sheet that opens from the bottom edge on a phone and a centred panel from sm.

What moves, and what happens with reduced motion?

The header and grid fade up once; the dialog uses the catalog's open animation and the quote fades in when you step. With reduced motion the entrance, the dialog and the fade are all switched off.

  • Pro

    Guestbook Customer Wall

    Customers

    A customer wall as a guestbook: five dated notes from shop owners, newest first, beside a framed form that adds your note to the top of the list for this visit.

  • Pro

    Tenure Testimonial Carousel

    Customers

    A carousel of five long-term customers of a retention product, each with how long they have stayed and read-only stars, beside the figure the block is about: 68% stay three years or longer.

  • Pro

    Mention Tally Customer Love

    Customers

    What customers mention most for a review-monitoring tool: six themes ranked with a bar to scale and a count, each opening two word-for-word snippets, with the tally derived from the typed reviews.

  • Pro

    Testimonial Form

    Collect a review

    A form for writing your own testimonial about Quill, in a split page column: name, role, star rating, a quote with a character counter and a permission switch on one side, a live preview card in a card on the other, and a Shine Button to send.

  • Pro

    Lightbox Gallery

    Stage and thumbnails

    Nine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.

  • Pro

    Testimonial Split About

    Company story

    A construction-management company's description beside one customer quote: a split on a solid divider with the quote on a card in a card, read-only stars, the author and a link to their story.

All 150 about blocks