Skip to main content
Exit fullscreen Esc

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.

Testimonials — 3-Column Grid

What customers say

  • "We replaced four hand-rolled table components with one. The first sortable, filterable report took an afternoon instead of a sprint."
    SC Sarah Chen CTO at LaunchPad
  • "Our accessibility audit came back with two findings, both in our own code. That has never happened to us with a UI library."
    MJ Marcus Johnson Lead Dev at Nexus
  • "Retheming for our second brand was one CSS block. We had budgeted three weeks for a fork."
    EP Emily Park Founder at Streamline 
<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>

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.

Testimonials — Single Featured Quote
"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."

Jane Smith

CTO at Acme Corp 

<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>