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

1 of 3

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

@props([
    'heading' => 'Customer reviews',
    'subheading' => 'Read what verified buyers think before you decide.',
    'average' => 4.6,
    'total' => 1284,
    'distribution' => null,
    'reviews' => null,
])

@php
    // Percentage of reviews that gave each star count, 5 → 1.
    $distribution ??= [
        5 => 72,
        4 => 18,
        3 => 6,
        2 => 3,
        1 => 1,
    ];

    $reviews ??= [
        [
            'name' => 'Avery Mitchell',
            'initials' => 'AM',
            'verified' => true,
            'rating' => 5,
            'date' => 'March 14, 2026',
            'title' => 'Exactly what the listing promised',
            'body' => 'Shipping was quick and the build quality feels well above the price. I have used it daily for three weeks and it still looks brand new. Would happily buy again.',
            'helpful' => 28,
        ],
        [
            'name' => 'Jordan Lee',
            'initials' => 'JL',
            'verified' => true,
            'rating' => 4,
            'date' => 'February 28, 2026',
            'title' => 'Great value, minor quibble',
            'body' => 'Does everything I hoped and the finish is lovely. The only thing keeping it from five stars is that the included instructions were a little thin. Easy enough to figure out, though.',
            'helpful' => 12,
        ],
        [
            'name' => 'Priya Nair',
            'initials' => 'PN',
            'verified' => true,
            'rating' => 5,
            'date' => 'February 9, 2026',
            'title' => 'Better in person',
            'body' => 'The photos really do not do it justice. Materials feel premium and it pairs perfectly with the rest of my setup. Customer support answered my pre-order question within an hour.',
            'helpful' => 19,
        ],
        [
            'name' => 'Marcus Bell',
            'initials' => 'MB',
            'verified' => false,
            'rating' => 4,
            'date' => 'January 22, 2026',
            'title' => 'Solid everyday choice',
            'body' => 'Comfortable, dependable and exactly the size I expected. It is not flashy, but it gets the job done without any fuss and that is precisely what I wanted.',
            'helpful' => 7,
        ],
    ];
@endphp

<section {{ $attributes->merge(['class' => 'bg-background py-16 text-foreground sm:py-20']) }}>
    <div class="mx-auto max-w-6xl px-4">
        <header class="max-w-2xl">
            <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            @if ($subheading)
                <p class="mt-4 text-pretty text-base text-muted-foreground sm:text-lg">{{ __($subheading) }}</p>
            @endif
        </header>

        <div class="mt-10 grid grid-cols-1 gap-8 lg:grid-cols-3">
            {{-- Summary panel --}}
            <aside class="lg:col-span-1">
                <x-ui.card class="flex flex-col gap-6 p-6 lg:sticky lg:top-8">
                    <div class="flex flex-col items-center gap-2 text-center">
                        <p class="text-3xl font-bold tracking-tight text-foreground">
                            {{ number_format($average, 1) }}
                        </p>
                        <x-ui.rating :value="$average" :max="5" step="0.5" :read-only="true" size="md" />
                        <p class="text-sm text-muted-foreground">
                            {{ __('Based on :count reviews', ['count' => number_format($total)]) }}
                        </p>
                    </div>

                    <x-ui.separator />

                    <dl class="flex flex-col gap-4">
                        @foreach ($distribution as $stars => $percent)
                            <div class="flex items-center gap-4">
                                <dt class="flex w-12 shrink-0 items-center gap-2 text-sm text-muted-foreground">
                                    <span class="font-medium text-foreground">{{ $stars }}</span>
                                    <svg class="size-4 text-primary" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z" />
                                    </svg>
                                </dt>
                                <dd class="flex flex-1 items-center gap-4">
                                    <x-ui.progress
                                        :value="$percent"
                                        :max="100"
                                        class="h-2 flex-1"
                                        :aria-label="__(':stars star reviews', ['stars' => $stars])"
                                    />
                                    <span class="w-10 shrink-0 text-end text-sm tabular-nums text-muted-foreground">{{ $percent }}%</span>
                                </dd>
                            </div>
                        @endforeach
                    </dl>

                    <x-ui.button type="button" class="w-full">
                        <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="M12 20h9" />
                                <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
                            </svg>
                        </x-slot:icon>
                        {{ __('Write a review') }}
                    </x-ui.button>
                </x-ui.card>
            </aside>

            {{-- Individual reviews --}}
            <div class="lg:col-span-2">
                <h3 class="sr-only">{{ __('Individual reviews') }}</h3>
                <ul role="list" class="flex flex-col gap-6">
                    @foreach ($reviews as $review)
                        <li>
                            <x-ui.card as="article" class="flex flex-col gap-4 p-6">
                                <div class="flex items-start gap-4">
                                    <x-ui.avatar :alt="$review['name']" :fallback="$review['initials']" />
                                    <div class="min-w-0 flex-1">
                                        <div class="flex flex-wrap items-center gap-2">
                                            <p class="text-sm font-semibold text-foreground">{{ __($review['name']) }}</p>
                                            @if (!empty($review['verified']))
                                                <x-ui.badge variant="secondary" class="gap-2">
                                                    <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                        <path d="M20 6 9 17l-5-5" />
                                                    </svg>
                                                    {{ __('Verified purchase') }}
                                                </x-ui.badge>
                                            @endif
                                        </div>
                                        <div class="mt-2 flex flex-wrap items-center gap-2">
                                            <x-ui.rating :value="$review['rating']" :max="5" step="0.5" :read-only="true" size="sm" />
                                            <span class="text-sm text-muted-foreground">{{ __($review['date']) }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex flex-col gap-2">
                                    <p class="text-base font-semibold text-foreground">{{ __($review['title']) }}</p>
                                    <p class="text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($review['body']) }}</p>
                                </div>

                                <x-ui.separator />

                                <div class="flex items-center gap-2 text-sm text-muted-foreground">
                                    <span>{{ __('Was this helpful?') }}</span>
                                    <span class="inline-flex items-center gap-2">
                                        <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>
                                        <span class="tabular-nums">{{ $review['helpful'] }}</span>
                                    </span>
                                </div>
                            </x-ui.card>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</section>

Installation

terminal

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

Installs these dependencies automatically:

card avatar rating button progress separator badge

Registry contract

Install confidence

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

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

Registry dependencies

card avatar rating button progress separator badge

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

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

A product reviews section with a sticky summary panel showing the average score, a readonly star rating, total review count, a 5-to-1 rating distribution of progress bars with percentages, and a write-a-review button, beside a wider column of individual review cards each with an avatar, reviewer name, verified-purchase badge, star rating, date, title, body, and a helpful-vote footer.

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

## Render it

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

## Props

- `heading` (string, default `Customer reviews`) — Section heading text.
- `subheading` (string, default `Read what verified buyers think before you decide.`) — Supporting copy under the heading.
- `average` (float, default `4.6`) — Average star rating shown in the summary panel.
- `total` (int, default `1284`) — Total review count used in the summary copy.
- `distribution` (mixed|null, default `null`) — Percentage of reviews per star count, keyed 5 down to 1; null falls back to a default distribution.
- `reviews` (mixed|null, default `null`) — Array of individual review rows; null falls back to a default 4-review sample set.

## Use when

- Showing a full reviews section with a sticky summary panel (average score, star rating, 5-to-1 rating distribution bars) beside a list of detailed review cards.
- Use when you need the rating breakdown by star count alongside individual reviews, not just a flat review list.

## Avoid when

- Needing a flat review list with photos and a load-more button instead of a distribution summary; use product-reviews-list instead.

## Rules

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

Ask about Product Reviews 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 full reviews section with a sticky summary panel (average score, star rating, 5-to-1 rating distribution bars) beside a list of detailed review cards.
Use when you need the rating breakdown by star count alongside individual reviews, not just a flat review list.

Avoid when

Needing a flat review list with photos and a load-more button instead of a distribution summary; use product-reviews-list instead.

Anti-patterns

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

Anatomy: header summary panel (score, rating, distribution bars, write-review button) review card list (avatar, badge, rating, body, helpful footer)

Usage

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

resources/views/welcome.blade.php Blade

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

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.