Staaarter

Testimonial Grid CTA

Social-proof-driven call-to-action built around a grid of short testimonial cards, each with an avatar, name, role, and quote, followed by a centered heading, description, and primary/secondary buttons.

By Staaarter Team
CTA
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/testimonial-grid-cta.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta25.tsx instead.

Usage

The file also exports cta25Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Cta25, cta25Demo } from "@/components/blocks/cta/cta25";

export default function Page() {
  return <Cta25 {...cta25Demo} />;
}

Props

PropTypeDefaultDescription
testimonialsTestimonial[]noneShort testimonial cards shown in the grid.
headingstringnoneCentered heading below the testimonial grid.
descriptionstringnoneSupporting copy under the heading.
primaryLabelstring"Get started free"Label for the primary button.
primaryHrefstring"#"Link target for the primary button.
secondaryLabelstring"Read more reviews"Label for the secondary button.
secondaryHrefstring"#"Link target for the secondary button.
classNamestringnoneExtra classes for the outer section element.

Types

interface Testimonial {
  quote: string;
  name: string;
  role: string;
  avatar?: { src: string; alt: string };
}

Behavior notes

  • Fully static: testimonials are hand-authored copy in a fixed grid, no carousel or client-side filtering.
  • Each avatar falls back to initials (via `AvatarFallback`/`initialsFromName`) when a testimonial has no photo.
  • Both buttons are inert links, not wired to a real signup or reviews page.