Testimonials

Testimonial grid

Three quotes with names and roles in a grid. Avatars are optional; initials render when there is no photo.

2 components33 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

AvatarTestimonials

Imports

import { Avatar, Testimonials } from '@the_viveksingh/vivek-ui'

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

import { Avatar, Testimonials } from '@the_viveksingh/vivek-ui'

const QUOTES = [
  {
    id: 'a',
    quote: 'We removed four dependencies the week we switched. The audit noise just stopped.',
    author: 'Priya Raman',
    role: 'Staff engineer, Meridian',
  },
  {
    id: 'b',
    quote:
      'The keyboard support is the part I did not expect. Our accessibility audit came back clean first time.',
    author: 'Tom Okafor',
    role: 'Frontend lead, Halcyon',
  },
  {
    id: 'c',
    quote: 'Theming is one CSS variable. I rebranded the whole admin panel on a Friday afternoon.',
    author: 'Elena Vasquez',
    role: 'Design engineer, Fieldwork',
  },
]

export default function TestimonialsGrid() {
  return (
    <Testimonials
      eyebrow="What people say"
      title="Teams that stopped fighting their component library"
      items={QUOTES.map((q) => ({ ...q, avatar: <Avatar name={q.author} size="sm" /> }))}
    />
  )
}
← All 62 blocks