Sections

Testimonials

Name: VivekUI
Author: Vivek Kumar Singh

Customer quotes.

Server safeSource

Import

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

Quotes

Each item renders as a real blockquote with its attribution in a figcaption, so the quote and its author stay connected outside of the visual layout.

We replaced three UI packages with this one and the lockfile got shorter. That never happens.
Priya NairStaff engineer
The :where() trick means our design system overrides just work. No specificity war, no !important.
Daniel OkaforDesign systems lead
Half of it renders on the server with no client boundary. Our TTI dropped noticeably.
Mei ChenFrontend architect

<Testimonials
  eyebrow="Testimonials"
  title="What teams say"
  columns={{ base: 1, md: 3 }}
  items={[
    {
      id: 'a',
      quote: 'We replaced three UI packages with this one and the lockfile got shorter.',
      author: 'Priya Nair',
      role: 'Staff engineer',
      avatar: <Avatar name="Priya Nair" />,
    },
  ]}
/>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Testimonials
Prop	Type	Default	Description
`items`	`Testimonial[]`	—	—
`columns`	`number \| ResponsiveCols`	—	Omit for an auto-fitting grid, which reflows at every width.
`minItemWidth`	`string`	—	Auto-fit track floor when `columns` is omitted. Defaults to `20rem`.
`eyebrow`	`ReactNode`	—	A plain string becomes a pill `Badge`; a node is rendered as given.
`title`	`ReactNode`	—	—
`description`	`ReactNode`	—	—
`headingLevel`	`HeadingLevel`	—	Level of the section's own `title`. Defaults to `2`.

Rendering

Server safe

Testimonials carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.