# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/testimonial8. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2025-12-25

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Testimonial](/blocks/testimonial)
5. /
6. Quote Cards Grid

# Quote Cards GridFREE

Grid of testimonial cards with decorative quote marks and HTML-supported text highlighting. Perfect for showcasing multiple customer reviews with emphasis on key phrases.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/testimonial8`

## Testimonial8: Quote Cards Grid

A grid of testimonial cards, each with a large decorative quote glyph, an HTML-rendered quote body that supports inline emphasis tags, an author and role line, and an optional row of CTA buttons beneath the grid.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/testimonial8"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/testimonial8"
```

This installs the block to `components/beste/block/testimonial8.tsx` and the `badge` and `button` shadcn/ui primitives it depends on.

### Quick start

The installed file exports `testimonial8Demo` alongside the block: the exact props behind the preview above. Spread it to get a working quote grid in one line.

tsxCopy

```
import { Testimonial8, testimonial8Demo } from "@/components/beste/block/testimonial8";

export default function LandingPage() {
  return <Testimonial8 {...testimonial8Demo} />;
}
```

Then replace the demo with your own props. Written out, the same setup looks like this:

tsxCopy

```
import { Testimonial8 } from "@/components/beste/block/testimonial8";

export default function LandingPage() {
  return (
    <Testimonial8
      heading="What our users say"
      description="Don't just take our word for it."
      quotes={[
        {
          id: "quote-1",
          quote: "We cut our deployment time from hours to minutes.",
          author: "Sarah Chen",
          role: "CTO at Streamline",
        },
        {
          id: "quote-2",
          quote: "Our entire team was onboarded in <strong>a single day</strong>.",
          author: "Marcus Webb",
          role: "Engineering Lead at Pulse",
        },
        {
          id: "quote-3",
          quote: "The support team is phenomenal.",
          author: "Lisa Park",
          role: "Product Manager at Vertex",
        },
      ]}
      buttons={[{ id: "btn-1", label: "Read more stories", href: "https://beste.co" }]}
    />
  );
}
```

### Props

| Prop        | Type                                                | Default     | Description                           |                                  |
| ----------- | --------------------------------------------------- | ----------- | ------------------------------------- | -------------------------------- |
| badge       | { label: string; variant?: "default" \| "secondary" | "outline" } | –                                     | Optional badge above the heading |
| heading     | string                                              | –           | Section heading                       |                                  |
| description | string                                              | –           | Section intro text                    |                                  |
| quotes      | TestimonialQuote\[\]                                | \[\]        | Cards rendered in the grid            |                                  |
| buttons     | ButtonItem\[\]                                      | \[\]        | CTAs rendered below the grid          |                                  |
| className   | string                                              | –           | Extra classes for the outer <section> |                                  |

tsCopy

```
type TestimonialQuote = {
  id: string;
  quote: string;
  author?: string;
  role?: string;
};

type ButtonItem = {
  id: string;
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};
```

### Behavior notes

* Returns `null` entirely when `quotes` is empty, so this section disappears completely rather than rendering an empty grid.
* Column count is picked by a dedicated `getGridColumns()` helper based on `quotes.length`: 1 quote stays single column, 2 becomes two columns at `md:`, counts divisible by 4 become four columns at `lg:`, and everything else (including the 3-quote demo) becomes three columns at `md:`.
* `quote.quote` is rendered through `dangerouslySetInnerHTML`, so inline HTML like `<strong>` is honored for emphasis (used in the demo's "within the hour" quote); any string passed here is trusted and rendered unescaped, so it should never come from untrusted input.
* Each card's decorative oversized quotation mark is absolutely positioned above the card's top edge (`-top-4`) at 20% opacity of the primary color, independent of the actual quote text length.
* Author name and role are each independently optional per card and simply omitted from the footer block when not provided.

## More Testimonial blocks

[View all Testimonial](/blocks/testimonial)

[](/block/testimonial23)

PRO

testimonial23

### Tagged Testimonials Grid

Grid of testimonial cards with category tags like Performance, Support, or Pricing. Perfect for organizing customer feedback by feature or benefit type.

[](/block/testimonial42)

PRO

testimonial42

### Three Quote Grid

A testimonial grid with an eyebrow over a hairline rule, a two-column heading, and three bordered quote cards each closing with an author avatar, name, and role.

[](/block/testimonial30)

PRO

testimonial30

### Rated Reviews

Centered grid of star-rated testimonial cards with avatars.

[](/block/testimonial26)

PRO

testimonial26

### Quote Wall

Masonry column wall of varied-length testimonial cards with avatars.

[](/block/testimonial28)

PRO

testimonial28

### Marquee Quotes

Two opposing auto-scrolling marquee rows of testimonial cards.

[](/block/testimonial34)

PRO

testimonial34

### Testimonial Marquee

Two rows of monochrome quote cards scrolling in opposite directions with edge fades.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.