---
title: Testimonials
description: Social proof sections with customer quotes. Available as a grid or single featured quote.
visibility: guest
draft: false
---

# Testimonials

Social proof sections with customer quotes. Available as a grid or single featured quote.

**Composed from:** `avatar`, `blockquote`, `container`, `heading`, `row`, `section`, `stack`, `testimonial`, `testimonial-grid`, `text`.

## Grid Layout

Multiple testimonials in a responsive grid. The card grid scales well from two to nine quotes — past nine the page becomes a wall of cards and a single featured quote usually reads better.

:::preview{title="Testimonials — 3-Column Grid" wide}
<x-wirekit::section padding="2xl" background="muted">
    <x-wirekit::container max="xl">
        <x-wirekit::stack gap="xl">
            <x-wirekit::heading level="2" size="3xl" style="text-align: center;">What customers say</x-wirekit::heading>
            <x-wirekit::testimonial-grid>
                <li>
                    <x-wirekit::testimonial author="Sarah Chen" role="CTO at LaunchPad">
                    "We replaced four hand-rolled table components with one. The first sortable, filterable report took an afternoon instead of a sprint."
                    </x-wirekit::testimonial>
                </li>

                <li>
                    <x-wirekit::testimonial author="Marcus Johnson" role="Lead Dev at Nexus">
                    "Our accessibility audit came back with two findings, both in our own code. That has never happened to us with a UI library."
                    </x-wirekit::testimonial>
                </li>

                <li>
                    <x-wirekit::testimonial author="Emily Park" role="Founder at Streamline">
                    "Retheming for our second brand was one CSS block. We had budgeted three weeks for a fork."
                    </x-wirekit::testimonial>
                </li>
            </x-wirekit::testimonial-grid>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>
:::

## Single Featured Quote

A large, centered testimonial for high-impact social proof. Best when one customer's endorsement is the strongest signal — a quote from someone whose name your readers will recognize.

:::preview{title="Testimonials — Single Featured Quote" wide}
<x-wirekit::section padding="2xl">
    <x-wirekit::container max="lg">
        <x-wirekit::stack gap="lg" align="center" style="text-align: center;">
            <x-wirekit::blockquote>
                "We shipped the whole admin surface with two frontend engineers and no design system of our own. Six months on, nobody has asked to replace it."
            </x-wirekit::blockquote>
            <x-wirekit::row gap="sm" align="center" justify="center">
                <x-wirekit::avatar alt="Jane Smith" />
                <x-wirekit::stack gap="none" style="text-align: left;">
                    <x-wirekit::text weight="semibold">Jane Smith</x-wirekit::text>
                    <x-wirekit::text size="sm" intent="muted">CTO at Acme Corp</x-wirekit::text>
                </x-wirekit::stack>
            </x-wirekit::row>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>
:::

## Related

- [Logo Cloud](/blueprints/partials/logo-cloud) — brand logos