1

Testimonial grid

Quiet testimonial cards in balanced columns, three on large screens and two on medium. On mobile the first three show under a soft fade, with a Show more button for the rest.

Interaction Type

A labelled section landmark with the quotes in a list of figures. From the medium breakpoint every card is visible in two or three columns. On mobile the first cards show under a soft bottom fade and a 44px Show more button with aria-expanded and aria-controls reveals the rest, which fade and rise in one after another; Show less folds them away and keeps the button in view. Reduced motion reveals them without the rise.

Props

Options you can pass to customize this component.

Prop
Type
Description
title
ReactNode

Section heading, left aligned.

description
ReactNode

One short line under the heading.

testimonials
{ quote: string; name: string; role: string }[]

Quotes with the person and their role. Each card shows a generated NameAvatar next to the name, so no photos are needed.

initialCount
number

Cards shown on mobile before Show more. Defaults to 3.

showMoreLabel, showLessLabel
string

Labels of the mobile toggle, overridable for localization.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/social-proof-testimonials.json

How to use

<SocialProofTestimonials
  title="What teams say"
  testimonials={[
    { quote: 'Setup took one afternoon.', name: 'Ada Park', role: 'CTO, Brightfold' },
    { quote: 'Dark mode just worked.', name: 'Leo Marsh', role: 'Designer, Tallow' },
  ]}
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
acme.app

What teams say

Notes from people shipping real products with Nexvyn UI.

  • We copied the dialog source into our repo and changed two tokens. It matched the rest of our product on the first try, in both themes.

    Ruth AbaraFrontend lead, Quillfern

  • Keyboard support is the part I usually rebuild by hand. Arrow keys, Escape and focus return already worked, so I spent the week on our actual product.

    Tomas LindqvistDesign engineer, Pellmark

  • I am not a designer and our marketing site still looks calm. Dark mode came along for free because everything reads from tokens.

    Amara OseiFounder, Tindra
npx shadcn@latest addhttps://ui.nexvyn.dev/r/social-proof-testimonials.json