A masonry wall of quotes with stars and who said them, in three columns, then two, then one.
$ pnpm dlx shadcn@latest add @dashral/testimonials-gridWhen to use
- A masonry wall of quotes with stars and who said them.
- Social proof on landing and pricing pages, with many short quotes.
When not to use
- A few long stories: Featured testimonial.
- Only two or three quotes: the wall would look empty; Featured testimonial.
Usage
Testimonials grid with your own data: every prop has the sample as its default, so pass only what you have.
example.tsx
import { TestimonialsGrid } from "@/components/dashral/blocks/testimonials-grid"
<TestimonialsGrid
title="Loved by teams"
quotes={quotes}
/>API reference
TestimonialsGrid
What customers say, as cards in columns that flow like a masonry wall: the quote, five stars, and who said it. Three columns, then two, then one on phones. Every part comes from props.
| Prop | Type | Default |
|---|---|---|
eyebrow | React.ReactNode | "Customers" |
title | React.ReactNode | sample |
description | React.ReactNode | sample |
quotes | Quote[] | sample |
type Quote
| Prop | Type | Default |
|---|---|---|
text | string | — |
name | string | — |
role | string | — |
src | string | — |
stars | number | — |