Product Overview

Open source

Product detail (PDP) layouts — an image gallery beside title, rating, price, colour/size selectors and add-to-cart.

resources/views/blocks/product-overview-gallery.blade.php Blade

@props([
    'brand'        => 'Maison Atelier',
    'category'     => 'Outerwear',
    'name'         => 'Structured Wool Overcoat',
    'sku'          => 'MA-OC-041',
    'price'        => '$348.00',
    'comparePrice' => '$435.00',
    'savePct'      => '20',
    'rating'       => 4,
    'reviewCount'  => 214,
    'description'  => 'Tailored from Italian boiled wool with a notched lapel, single-button closure, and fully lined interior. A wardrobe-investment piece equally at home over a suit or weekend denim.',
    'thumbnails'   => null,
    'colors'       => null,
    'sizes'        => null,
    'soldOut'      => null,
    'action'       => '#',
])

@php
    $thumbnails ??= [
        ['label' => 'Front', 'token' => 'bg-muted'],
        ['label' => 'Back', 'token' => 'bg-accent'],
        ['label' => 'Detail', 'token' => 'bg-secondary'],
        ['label' => 'Lining', 'token' => 'bg-card'],
    ];
    $colors ??= [
        ['name' => 'Charcoal', 'class' => 'bg-foreground'],
        ['name' => 'Ivory', 'class' => 'bg-background border border-border'],
        ['name' => 'Camel', 'class' => 'bg-muted-foreground'],
        ['name' => 'Forest', 'class' => 'bg-primary'],
    ];
    $sizes ??= ['XS', 'S', 'M', 'L', 'XL', 'XXL'];
    $soldOut ??= [4];

    // The swatch and option-group primitives take value/label entries; the
    // `$soldOut` prop stays index-based for compatibility and maps to labels here.
    $swatches = collect($colors)->map(fn ($color) => [
        'value' => $color['value'] ?? $color['name'],
        'label' => __($color['name']),
        'token' => $color['class'],
    ])->values()->all();
    $unavailableSizes = array_values(array_intersect_key($sizes, array_flip($soldOut)));
@endphp

<x-ui.section space="lg" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <div class="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
            <div class="flex flex-col gap-4 lg:flex-row lg:gap-4">
                <ul class="hidden lg:flex lg:flex-col lg:gap-4" aria-label="{{ __('Product thumbnails') }}">
                    @foreach ($thumbnails as $i => $thumb)
                        <li><button type="button" aria-pressed="{{ $i === 0 ? 'true' : 'false' }}" aria-label="{{ __('View :label image', ['label' => __($thumb['label'])]) }}" @class([
                            'relative aspect-square w-20 shrink-0 overflow-hidden rounded-lg border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                            'border-primary ring-2 ring-primary' => $i === 0,
                            'border-border hover:border-foreground/40' => $i !== 0,
                        ])>
                            <span class="flex h-full w-full items-center justify-center {{ $thumb['token'] }}" aria-hidden="true">
                                <svg class="size-7 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" /></svg>
                            </span>
                        </button></li>
                    @endforeach
                </ul>

                <div class="relative flex flex-1 items-center justify-center overflow-hidden rounded-lg bg-muted aspect-square" role="img" aria-label="{{ __($name) }}">
                    <svg class="size-32 text-muted-foreground/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" /></svg>
                </div>

                <ul class="flex gap-4 overflow-x-auto pb-2 lg:hidden" aria-label="{{ __('Product thumbnails') }}">
                    @foreach ($thumbnails as $i => $thumb)
                        <li><button type="button" aria-pressed="{{ $i === 0 ? 'true' : 'false' }}" aria-label="{{ __('View :label image', ['label' => __($thumb['label'])]) }}" @class([
                            'relative aspect-square w-20 shrink-0 overflow-hidden rounded-lg border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                            'border-primary ring-2 ring-primary' => $i === 0,
                            'border-border hover:border-foreground/40' => $i !== 0,
                        ])>
                            <span class="flex h-full w-full items-center justify-center {{ $thumb['token'] }}" aria-hidden="true">
                                <svg class="size-6 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><path d="m21 15-5-5L5 21" /></svg>
                            </span>
                        </button></li>
                    @endforeach
                </ul>
            </div>

            <div class="flex flex-col gap-6">
                <p class="text-sm font-semibold uppercase tracking-widest text-muted-foreground">{{ __($category) }}</p>
                <div class="flex flex-col gap-2">
                    <p class="text-sm font-semibold uppercase tracking-widest text-primary">{{ __($brand) }}</p>
                    <h1 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($name) }}</h1>
                    <p class="text-sm text-muted-foreground">{{ __('SKU: :sku', ['sku' => $sku]) }}</p>
                </div>

                <div class="flex flex-wrap items-center gap-4">
                    <span class="text-3xl font-semibold tracking-tight text-foreground">{{ $price }}</span>
                    @if ($comparePrice)
                        <span class="text-lg text-muted-foreground line-through">{{ $comparePrice }}</span>
                    @endif
                    @if ($savePct)
                        <x-ui.badge variant="secondary">{{ __('Save :pct%', ['pct' => $savePct]) }}</x-ui.badge>
                    @endif
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    <x-ui.rating :value="$rating" display size="sm" />
                    <a href="#reviews" class="text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">{{ __(':count reviews', ['count' => number_format((int) $reviewCount)]) }}</a>
                </div>

                <p class="text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($description) }}</p>

                <fieldset class="flex flex-col gap-4">
                    <legend class="text-sm font-medium text-foreground">{{ __('Colour') }}</legend>
                    <x-ui.color-swatch name="colour" :selected="$swatches[0]['value'] ?? null" :colors="$swatches" />
                </fieldset>

                <fieldset class="flex flex-col gap-4">
                    <div class="flex items-center justify-between">
                        <legend class="text-sm font-medium text-foreground">{{ __('Size') }}</legend>
                        <a href="#size-guide" class="text-sm font-medium text-link underline-offset-4 hover:underline">{{ __('Size guide') }}</a>
                    </div>
                    <x-ui.option-group name="size" :options="$sizes" :selected="$sizes[1] ?? null" :unavailable="$unavailableSizes" />
                </fieldset>

                <form method="POST" action="{{ $action }}" class="flex flex-col gap-4 sm:flex-row">
                    @csrf
                    <input type="hidden" name="quantity" value="1" />
                    <x-ui.button type="submit" size="lg" class="flex-1">
                        <x-slot:icon>
                            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="21" r="1" /><circle cx="20" cy="21" r="1" /><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" /></svg>
                        </x-slot:icon>
                        {{ __('Add to cart') }}
                    </x-ui.button>
                    <x-ui.button type="button" variant="outline" size="lg" aria-label="{{ __('Add to wishlist') }}">
                        <x-slot:icon>
                            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z" /></svg>
                        </x-slot:icon>
                        {{ __('Wishlist') }}
                    </x-ui.button>
                </form>

                <div class="flex flex-wrap items-center gap-x-6 gap-y-4 border-t border-border pt-6 text-sm text-muted-foreground">
                    <span class="flex items-center gap-2">
                        <svg class="size-4 shrink-0 text-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="1" y="3" width="15" height="13" rx="1" /><path d="M16 8h4l3 3v5h-7" /><circle cx="5.5" cy="18.5" r="2" /><circle cx="18.5" cy="18.5" r="2" /></svg>
                        {{ __('Free shipping over $100') }}
                    </span>
                    <span class="flex items-center gap-2">
                        <svg class="size-4 shrink-0 text-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 3v5h5" /></svg>
                        {{ __('Free 30-day returns') }}
                    </span>
                </div>
            </div>
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/product-overview-gallery

Installs these dependencies automatically:

badge button color-swatch container option-group rating section

Registry contract

Install confidence

php artisan ui:add blocks/product-overview-gallery 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-overview-gallery.blade.php

Registry dependencies

badge button color-swatch container option-group rating 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.

product-overview-gallery.md

# Brok UI block: Product Overview Gallery (`product-overview-gallery`)

A product detail layout with a vertical thumbnail rail beside a large image, and product info with colour and size selectors, quantity and add-to-cart.

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-overview-gallery
```

## Render it

```blade
<x-blocks.product-overview-gallery />
```

## Props

- `brand` (string, default `Maison Atelier`) — Brand name shown above the title.
- `category` (string, default `Outerwear`) — Category label shown above the brand.
- `name` (string, default `Structured Wool Overcoat`) — Product name / page title.
- `sku` (string, default `MA-OC-041`) — SKU code shown under the title.
- `price` (string, default `$348.00`) — Current price, pre-formatted.
- `compare-price` (string, default `$435.00`) — Struck-through original price; falsy hides it.
- `save-pct` (string, default `20`) — Percentage-off value shown in a badge; falsy hides it.
- `rating` (int, default `4`) — Average rating value rendered by the display-only rating stars.
- `review-count` (int, default `214`) — Number of reviews linked from the rating row.
- `description` (string, default `Tailored from Italian boiled wool with a notched lapel, single-button closure, and fully lined interior. A wardrobe-investment piece equally at home over a suit or weekend denim.`) — Product description copy.
- `thumbnails` (mixed|null, default `null`) — Array of {label, token} gallery thumbnail entries.
- `colors` (mixed|null, default `null`) — Array of {name, class} colour swatch entries using semantic token classes.
- `sizes` (mixed|null, default `null`) — Array of size option label strings.
- `sold-out` (mixed|null, default `null`) — Array of sold-out size indexes marked unavailable in the size selector.
- `action` (string, default `#`) — Form action URL submitted by the add-to-cart form.

## Use when

- Building a product detail layout with a vertical thumbnail rail beside a large main image, and product info including SKU, price, save percentage, colour and size selectors, and add-to-cart/wishlist buttons.
- Wanting a static, display-only presentation of the gallery and selectors (first thumbnail and second size pre-marked as selected) rather than working client-side state.

## Avoid when

- Needing the thumbnail and colour/size controls to actually update on click; use product-overview-detail instead.

## Rules

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

Ask about Product Overview Gallery 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

Building a product detail layout with a vertical thumbnail rail beside a large main image, and product info including SKU, price, save percentage, colour and size selectors, and add-to-cart/wishlist buttons.
Wanting a static, display-only presentation of the gallery and selectors (first thumbnail and second size pre-marked as selected) rather than working client-side state.

Avoid when

Needing the thumbnail and colour/size controls to actually update on click; use product-overview-detail instead.

Anti-patterns

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

Anatomy: thumbnail rail main image product details category label brand title sku price rating colour swatches size selector add to cart form shipping info

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.product-overview-gallery />

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.