Product Reviews

Open source

Review sections — an average-score summary with a rating-distribution breakdown beside a list of individual customer reviews.

Add to page builder

3 of 3

resources/views/blocks/product-reviews-list.blade.php Blade

@props([
    'heading' => 'Customer reviews',
    'average' => 4.7,
    'total'   => 318,
    'reviews' => null,
])

@php
    $reviews ??= [
        ['name' => 'Avery Mitchell', 'initials' => 'AM', 'rating' => 5, 'date' => 'June 10, 2026', 'verified' => true, 'title' => 'Absolutely worth it', 'body' => 'After three weeks of daily use the quality still impresses me. Arrived quickly, packaged well, and lives up to every claim on the listing.', 'helpful' => 34, 'photos' => ['from-primary/20 to-accent/30', 'from-secondary/30 to-primary/20', 'from-accent/20 to-secondary/30']],
        ['name' => 'Jordan Lee', 'initials' => 'JL', 'rating' => 4, 'date' => 'May 28, 2026', 'verified' => true, 'title' => 'Great value, small gripe', 'body' => 'Does everything I needed and the finish feels premium. Only docking one star because the included guide is a bit sparse.', 'helpful' => 17, 'photos' => []],
        ['name' => 'Priya Nair', 'initials' => 'PN', 'rating' => 5, 'date' => 'May 12, 2026', 'verified' => true, 'title' => 'Better in person than in photos', 'body' => 'The listing photos genuinely undersell how nice this looks. Materials feel solid and support replied within the hour.', 'helpful' => 22, 'photos' => ['from-accent/30 to-primary/20', 'from-primary/20 to-accent/20']],
        ['name' => 'Marcus Bell', 'initials' => 'MB', 'rating' => 4, 'date' => 'April 30, 2026', 'verified' => false, 'title' => 'Solid everyday pick', 'body' => 'Dependable and exactly the size I expected. Nothing flashy, but it does the job without any fuss.', 'helpful' => 9, 'photos' => []],
    ];
@endphp

<x-ui.section space="md" {{ $attributes }}>
    <div class="mx-auto max-w-3xl px-4">
        <header class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <h2 class="text-2xl font-bold tracking-tight">{{ __($heading) }}</h2>
                <div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2">
                    <span class="text-4xl font-bold tabular-nums text-foreground">{{ number_format($average, 1) }}</span>
                    <x-ui.rating :value="$average" display :label="__(':avg out of 5 stars', ['avg' => number_format($average, 1)])" />
                    <span class="text-sm text-muted-foreground">{{ __(':count reviews', ['count' => number_format($total)]) }}</span>
                </div>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <x-ui.button variant="outline" type="button" size="sm">
                    <x-slot:icon><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M7 12h10M11 18h2" /></svg></x-slot:icon>
                    {{ __('Sort: Most recent') }}
                </x-ui.button>
                <x-ui.button variant="default" type="button" size="sm">{{ __('Write a review') }}</x-ui.button>
            </div>
        </header>

        <x-ui.separator class="mt-8" />

        <ul role="list" class="divide-y divide-border">
            @foreach ($reviews as $review)
                <li class="py-8">
                    <article class="flex flex-col gap-4">
                        <div class="flex items-start gap-4">
                            <x-ui.avatar :alt="$review['name']" :fallback="$review['initials']" size="md" />
                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-center gap-x-2 gap-y-2">
                                    <p class="text-sm font-semibold text-foreground">{{ $review['name'] }}</p>
                                    @if (! empty($review['verified']))<x-ui.badge variant="success" size="sm">{{ __('Verified purchase') }}</x-ui.badge>@endif
                                </div>
                                <p class="mt-0.5 text-sm text-muted-foreground">{{ $review['date'] }}</p>
                            </div>
                        </div>
                        <x-ui.rating :value="$review['rating']" display size="sm" />
                        <div>
                            <p class="font-medium text-foreground">{{ $review['title'] }}</p>
                            <p class="mt-2 text-pretty text-sm leading-relaxed text-muted-foreground">{{ $review['body'] }}</p>
                        </div>
                        @if (! empty($review['photos']))
                            <div class="flex flex-wrap gap-2" role="list" aria-label="{{ __('Review photos') }}">
                                @foreach ($review['photos'] as $gradient)
                                    <div role="listitem" class="size-16 shrink-0 overflow-hidden rounded-md bg-gradient-to-br {{ $gradient }}" aria-label="{{ __('Review photo') }}"></div>
                                @endforeach
                            </div>
                        @endif
                        <div class="flex flex-wrap items-center gap-4 border-t border-border pt-4">
                            <span class="text-sm text-muted-foreground">{{ __('Was this helpful?') }}</span>
                            <x-ui.button variant="ghost" size="sm" type="button" aria-label="{{ __('Mark review as helpful') }}">
                                <x-slot:icon><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v12" /><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" /></svg></x-slot:icon>
                                <span class="tabular-nums">{{ $review['helpful'] }}</span>
                            </x-ui.button>
                            <x-ui.button variant="ghost" size="sm" type="button" aria-label="{{ __('Mark review as not helpful') }}">
                                <x-slot:icon><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 14V2" /><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" /></svg></x-slot:icon>
                            </x-ui.button>
                        </div>
                    </article>
                </li>
            @endforeach
        </ul>

        <div class="mt-6 flex justify-center">
            <x-ui.button variant="outline" type="button">{{ __('Load more reviews') }}</x-ui.button>
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/product-reviews-list

Installs these dependencies automatically:

avatar badge button rating section separator

Registry contract

Install confidence

php artisan ui:add blocks/product-reviews-list 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.1.2
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/product-reviews-list.blade.php

Registry dependencies

avatar badge button rating section separator

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.

product-reviews-list.md

# Brok UI block: Product Reviews List (`product-reviews-list`)

A detailed customer-review list with average score, per-review avatars, verified badges, photos and helpful voting.

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/product-reviews-list
```

## Render it

```blade
<x-blocks.product-reviews-list />
```

## Props

- `heading` (string, default `Customer reviews`) — Section heading text.
- `average` (float, default `4.7`) — Average star rating shown next to the heading.
- `total` (int, default `318`) — Total review count shown in the header.
- `reviews` (mixed|null, default `null`) — Array of individual review rows, including optional photos; null falls back to a default 4-review sample set.

## Use when

- Showing a flat, chronological list of customer reviews with avatars, verified badges, optional photo thumbnails and helpful/not-helpful actions, plus sort, write-review and load-more buttons.
- Use when you want a simple review list without a star-count rating-distribution breakdown.

## Avoid when

- Needing the 5-to-1 star rating distribution bars alongside the reviews; use product-reviews-summary instead.

## Rules

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

Ask about Product Reviews List 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

Showing a flat, chronological list of customer reviews with avatars, verified badges, optional photo thumbnails and helpful/not-helpful actions, plus sort, write-review and load-more buttons.
Use when you want a simple review list without a star-count rating-distribution breakdown.

Avoid when

Needing the 5-to-1 star rating distribution bars alongside the reviews; use product-reviews-summary instead.

Anti-patterns

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

Anatomy: header (average score, rating, sort/write actions) review list review item (avatar, badge, rating, body, photos, helpful actions) load more button

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.product-reviews-list />

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.