shadcn.io is not affiliated with official shadcn/ui
Dialog Reader Testimonial Grid Block for Vue
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.
Installation
Overview
A testimonial grid for Vue with Ark 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.