Testimonials

Open source

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

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

@props([
    'eyebrow' => 'Loved by teams',
    'heading' => 'What our customers say',
    'subheading' => 'Thousands of teams ship with confidence. Here is what they think about working with us.',
    'testimonials' => null,
    'loop' => true,
])

@php
    $testimonials ??= [
        [
            'quote' => 'We replaced three internal tools with this and shipped a redesign in a single sprint. The team owns every line of the markup now.',
            'name' => 'Amara Okafor',
            'role' => 'Head of Design, Northwind',
            'initials' => 'AO',
        ],
        [
            'quote' => 'The token-driven theming meant our brand refresh was a config change, not a rewrite. Onboarding new engineers takes hours, not weeks.',
            'name' => 'Liam Bennett',
            'role' => 'Staff Engineer, Avela',
            'initials' => 'LB',
        ],
        [
            'quote' => 'Accessibility was the deciding factor. Keyboard support, focus states, and RTL all worked out of the box on day one.',
            'name' => 'Sofia Marchetti',
            'role' => 'Product Lead, Brightline',
            'initials' => 'SM',
        ],
        [
            'quote' => 'No runtime lock-in is exactly what we needed. We copied the source in, customised freely, and never looked back.',
            'name' => 'Devon Hayes',
            'role' => 'CTO, Loomwork',
            'initials' => 'DH',
        ],
        [
            'quote' => 'Updates are painless. Unedited files refresh automatically and our changes are always preserved with a clean diff.',
            'name' => 'Priya Nair',
            'role' => 'Engineering Manager, Cobalt',
            'initials' => 'PN',
        ],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <div class="mx-auto max-w-5xl px-4">
        <div class="mx-auto max-w-2xl text-center">
            @if ($eyebrow)
                <p class="text-sm font-semibold uppercase tracking-wide text-primary">{{ __($eyebrow) }}</p>
            @endif
            <h2 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            @if ($subheading)
                <p class="mt-4 text-pretty text-lg text-muted-foreground">{{ __($subheading) }}</p>
            @endif
        </div>

        <x-ui.carousel :loop="$loop" class="mx-auto mt-12 max-w-3xl px-12 sm:px-14" aria-label="{{ __('Customer testimonials') }}">
            <x-ui.carousel.content>
                @foreach ($testimonials as $i => $testimonial)
                    <x-ui.carousel.item class="px-2 sm:px-2">
                        <x-ui.quote-card
                            glyph="solid"
                            size="lg"
                            avatar-size="lg"
                            :quote="__($testimonial['quote'])"
                            :name="__($testimonial['name'])"
                            :role="__($testimonial['role'])"
                            :initials="$testimonial['initials']"
                            class="sm:p-8"
                        />
                    </x-ui.carousel.item>
                @endforeach
            </x-ui.carousel.content>

            <x-ui.carousel.previous />
            <x-ui.carousel.next />
        </x-ui.carousel>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/testimonials-carousel

Installs these dependencies automatically:

carousel quote-card section

Registry contract

Install confidence

php artisan ui:add blocks/testimonials-carousel 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.5
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

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

Registry dependencies

carousel quote-card section

Package dependencies

composer: jml/brok:^0.2

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-carousel.md

# Brok UI block: Testimonials Carousel (`testimonials-carousel`)

A centered heading above a horizontally scrollable carousel of testimonial cards, each pairing a quote with an avatar, name, and role, plus previous/next controls.

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

## Render it

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

## Props

- `eyebrow` (string, default `Loved by teams`) — Small label shown above the heading.
- `heading` (string, default `What our customers say`) — Section heading.
- `subheading` (string, default `Thousands of teams ship with confidence. Here is what they think about working with us.`) — Supporting copy under the heading.
- `testimonials` (mixed|null, default `null`) — Quote entries with quote text, name, role and initials; null falls back to sample data.
- `loop` (bool, default `true`) — Wraps the carousel from the last slide back to the first.

## Use when

- Letting visitors page through testimonials with previous/next controls in a horizontally scrollable carousel.
- Wanting user-controlled pacing rather than an auto-scrolling marquee or a static grid.

## Avoid when

- Wanting all quotes visible at once without scrolling; use testimonials-grid instead.

## Rules

- Render the installed block with `<x-blocks.testimonials-carousel />` 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-carousel
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/testimonials-carousel.json

Ask about Testimonials Carousel 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 page through testimonials with previous/next controls in a horizontally scrollable carousel.
Wanting user-controlled pacing rather than an auto-scrolling marquee or a static grid.

Avoid when

Wanting all quotes visible at once without scrolling; use testimonials-grid instead.

Anti-patterns

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

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.testimonials-carousel />

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.