Testimonial Grid

A complete testimonial grid section, ready to adapt to your product.

Make it yours.

Install the editable source and its dependencies into your React + Tailwind project.

Scroll horizontally for long lines

pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/testimonial-grid.json

Use it

Scroll horizontally for long lines

"use client";
import {TestimonialGrid} from '@/components/jez-ui/blocks/testimonial-grid';

export default function Example(){

return <><TestimonialGrid/></>;
}

Props & types

Scroll horizontally for long lines

{ className?: string }

Source

View 2 source files

registry/blocks/testimonial-grid.tsx

Scroll horizontally for long lines

"use client";
import * as React from "react";
import { cn } from "../ui/utils";
export function TestimonialGrid({ className }: { className?: string }) {
  return (
    <section className={cn("py-8", className)}>
      <h2 className="text-3xl">Room for your customers’ stories.</h2>
      <p className="mt-2 mb-7 text-sm text-muted-foreground">
        Sample quotes for layout demonstration.
      </p>
      <div className="grid gap-8 md:grid-cols-3">
        {[
          "The best part is knowing where everything belongs.",
          "It gave our small team a little more room to think.",
          "A calmer way to get from the first idea to the finished thing.",
        ].map((q, i) => (
          <figure key={q} className="m-0 border-t border-border pt-5">
            <blockquote className="text-xl leading-relaxed">“{q}”</blockquote>
            <figcaption className="mt-5 text-xs text-muted-foreground">
              Sample customer {i + 1} · Illustrative quote
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

registry/ui/utils.ts

Scroll horizontally for long lines

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

Dependencies

clsx@2.1.1 · tailwind-merge@3.5.0

Accessibility & behaviour

Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.

Read the accessibility and performance guide →