Testimonials

Open source

Social-proof sections — grids, a single hero quote, a masonry wall, marquees and a carousel.

resources/views/blocks/testimonials-spotlight.blade.php Blade

@props([
    'heading' => 'Trusted by teams who ship',
    'subheading' => 'Pick a customer to hear how they put the system to work.',
    'quotes' => null,
])

@php
    $quotes ??= [
        [
            'text' => 'We replaced three internal tools with this and shipped a full redesign in a single sprint. Owning every line of markup changed how confidently we move.',
            'name' => 'Amara Okafor',
            'role' => 'Head of Design',
            'company' => 'Northwind',
            'avatar' => null,
            'initials' => 'AO',
        ],
        [
            'text' => 'Token-driven theming turned our brand refresh into a config change instead of a rewrite. Onboarding new engineers now takes hours, not weeks.',
            'name' => 'Liam Bennett',
            'role' => 'Staff Engineer',
            'company' => 'Avela',
            'avatar' => null,
            'initials' => 'LB',
        ],
        [
            'text' => 'Accessibility was the deciding factor. Keyboard support, focus states, and RTL all worked out of the box on the very first day.',
            'name' => 'Sofia Marchetti',
            'role' => 'Product Lead',
            'company' => 'Brightline',
            'avatar' => null,
            'initials' => 'SM',
        ],
        [
            'text' => 'No runtime lock-in was exactly what we needed. We copied the source in, customised freely, and pull clean updates without ever fighting our codebase.',
            'name' => 'Devon Hayes',
            'role' => 'CTO',
            'company' => 'Loomwork',
            'avatar' => null,
            'initials' => 'DH',
        ],
    ];

    $count = count($quotes);
@endphp

<x-ui.section
    data-slot="testimonials-09"
    space="xl" {{ $attributes }}
    x-data="{ active: 0, count: {{ $count }} }"
>
    <div class="mx-auto max-w-3xl px-4">
        <div class="mx-auto max-w-2xl text-center">
            <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            @if ($subheading)
                <p class="mt-4 text-pretty text-sm text-muted-foreground">{{ __($subheading) }}</p>
            @endif
        </div>

        <figure class="mt-12 flex flex-col items-center text-center">
            <svg class="size-10 text-primary/60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M7.17 6A5.001 5.001 0 0 0 3 11v7h7v-7H6.5a3 3 0 0 1 2.92-2.34L7.17 6Zm10 0A5.001 5.001 0 0 0 13 11v7h7v-7h-3.5a3 3 0 0 1 2.92-2.34L17.17 6Z" />
            </svg>

            <div class="mt-6 min-h-[10rem] w-full" aria-live="polite">
                @foreach ($quotes as $i => $quote)
                    <div
                        x-show="active === {{ $i }}"
                        x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="opacity-0 translate-y-2"
                        x-transition:enter-end="opacity-100 translate-y-0"
                    >
                        <blockquote class="text-balance text-2xl font-medium leading-relaxed tracking-tight sm:text-3xl sm:leading-relaxed">
                            <p>{{ __($quote['text']) }}</p>
                        </blockquote>

                        <figcaption class="mt-8 flex flex-col items-center gap-4">
                            <div class="text-sm font-semibold text-foreground">{{ __($quote['name']) }}</div>
                            <div class="text-sm text-muted-foreground">
                                {{ __($quote['role']) }}@if (! empty($quote['role']) && ! empty($quote['company'])), @endif{{ __($quote['company']) }}
                            </div>
                            @if (! empty($quote['company']))
                                <x-ui.badge variant="secondary" class="mt-2">{{ __($quote['company']) }}</x-ui.badge>
                            @endif
                        </figcaption>
                    </div>
                @endforeach
            </div>
        </figure>

        <div
            class="mt-10 flex flex-wrap items-center justify-center gap-4"
            role="group"
            aria-label="{{ __('Select a customer') }}"
        >
            @foreach ($quotes as $i => $quote)
                <button
                    type="button"
                    @click="active = {{ $i }}"
                    :aria-pressed="active === {{ $i }} ? 'true' : 'false'"
                    :class="active === {{ $i }}
                        ? 'ring-2 ring-primary ring-offset-2 ring-offset-background scale-110'
                        : 'hover:scale-105'"
                    class="rounded-full transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                    aria-label="{{ __($quote['name']) }}"
                >
                    <x-ui.avatar size="lg" :src="$quote['avatar']" :fallback="$quote['initials']">{{ $quote['initials'] }}</x-ui.avatar>
                </button>
            @endforeach
        </div>

        <div class="mt-8 flex items-center justify-center gap-4">
            <x-ui.button
                variant="outline"
                size="sm"
                aria-label="{{ __('Previous testimonial') }}"
                x-on:click="active = (active - 1 + count) % count"
            >
                <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M15 18l-6-6 6-6" />
                </svg>
                {{ __('Previous') }}
            </x-ui.button>

            <x-ui.button
                variant="outline"
                size="sm"
                aria-label="{{ __('Next testimonial') }}"
                x-on:click="active = (active + 1) % count"
            >
                {{ __('Next') }}
                <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M9 18l6-6-6-6" />
                </svg>
            </x-ui.button>
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/testimonials-spotlight

Installs these dependencies automatically:

avatar badge button section

Registry contract

Install confidence

php artisan ui:add blocks/testimonials-spotlight writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.6
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/testimonials-spotlight.blade.php

Registry dependencies

avatar badge button section

Package dependencies

composer: jml/brok:^0.2

npm: alpinejs

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

testimonials-spotlight.md

# Brok UI block: Testimonials Spotlight (`testimonials-spotlight`)

A spotlight testimonial with an avatar switcher: one large featured blockquote with author name, role, and company badge, plus a labelled row of selectable customer avatars and prev/next controls that swap the active quote. The quote region is aria-live, the active avatar gets a ring/scale and aria-pressed state, and all interactivity is inline Alpine.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/testimonials-spotlight
```

## Render it

```blade
<x-blocks.testimonials-spotlight />
```

## Props

- `heading` (string, default `Trusted by teams who ship`) — Section heading.
- `subheading` (string, default `Pick a customer to hear how they put the system to work.`) — Supporting copy under the heading.
- `quotes` (mixed|null, default `null`) — Quote entries with text, name, role, company and avatar, switched by the avatar row; null falls back to sample data.

## Use when

- Letting visitors switch between customers via a labelled avatar row to reveal one large featured quote at a time.
- Wanting an interactive spotlight rather than showing all quotes simultaneously.

## Avoid when

- Wanting all testimonials visible without interaction; use testimonials-grid instead.

## Rules

- Render the installed block with `<x-blocks.testimonials-spotlight />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/testimonials-spotlight
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/testimonials-spotlight.json

Ask about Testimonials Spotlight in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Letting visitors switch between customers via a labelled avatar row to reveal one large featured quote at a time.
Wanting an interactive spotlight rather than showing all quotes simultaneously.

Avoid when

Wanting all testimonials visible without interaction; use testimonials-grid instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: root testimonials-09

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.testimonials-spotlight />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.