Product Overview

Open source

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

1 of 4

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

@props([
    'brand' => 'Northwind',
    'name' => 'Aero Knit Running Shoe',
    'price' => '$148.00',
    'comparePrice' => '$180.00',
    'rating' => 4.5,
    'reviewCount' => 128,
    'description' => 'A featherweight everyday trainer with a breathable engineered-knit upper, responsive foam midsole, and a grippy outsole tuned for road and track alike.',
    'colors' => null,
    'sizes' => null,
    'images' => null,
    'action' => '#',
])

@php
    // Colour swatches reference semantic tokens by class name (never raw hex),
    // so re-theming changes the dots automatically and the raw-colour guard passes.
    $colors ??= [
        ['name' => 'Slate',   'class' => 'bg-foreground'],
        ['name' => 'Primary', 'class' => 'bg-primary'],
        ['name' => 'Muted',   'class' => 'bg-muted-foreground'],
        ['name' => 'Accent',  'class' => 'bg-accent-foreground'],
    ];

    $sizes ??= ['US 7', 'US 8', 'US 9', 'US 10', 'US 11', 'US 12'];

    // <x-ui.color-swatch> takes value/label/token entries; the Alpine `color`
    // state holds the option value, and the legend reads its label from a map.
    $swatches = collect($colors)->map(fn ($color) => [
        'value' => $color['value'] ?? $color['name'],
        'label' => __($color['name']),
        'token' => $color['class'],
    ])->values()->all();
    $colorLabels = collect($swatches)->pluck('label', 'value')->all();

    // Gallery thumbnails: each is a label for a decorative tinted panel so the
    // block renders standalone without bundling binary image assets.
    $images ??= ['Front', 'Side', 'Sole', 'Detail'];
@endphp

<section
    x-data="{
        color: @js($swatches[0]['value'] ?? null),
        size: null,
        qty: 1,
        active: 0,
    }"
    {{ $attributes->merge(['class' => 'bg-background py-12 text-foreground sm:py-16']) }}
>
    <div class="mx-auto grid max-w-6xl grid-cols-1 gap-10 px-4 lg:grid-cols-2 lg:gap-16">
        {{-- Gallery --}}
        <div class="flex flex-col gap-4">
            <div
                class="relative flex aspect-square items-center justify-center overflow-hidden rounded-lg bg-muted"
                role="img"
                :aria-label="@js(__($name)) + ' — ' + [@js(__($images[0])), @js(__($images[1])), @js(__($images[2])), @js(__($images[3]))][active]"
            >
                <svg class="size-28 text-muted-foreground/40 transition-transform duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M3 7l9-4 9 4-9 4-9-4Z" />
                    <path d="M3 7v10l9 4 9-4V7" />
                    <path d="M12 11v10" />
                </svg>
                <span class="absolute bottom-4 end-4 text-sm font-medium uppercase tracking-wide text-muted-foreground" x-text="[@js(__($images[0])), @js(__($images[1])), @js(__($images[2])), @js(__($images[3]))][active]"></span>
            </div>

            <ul class="grid grid-cols-4 gap-4" role="list">
                @foreach ($images as $i => $image)
                    <li>
                        <button
                            type="button"
                            @click="active = {{ $i }}"
                            :class="active === {{ $i }} ? 'border-primary ring-2 ring-ring' : 'border-border hover:border-foreground/40'"
                            :aria-pressed="active === {{ $i }} ? 'true' : 'false'"
                            class="flex aspect-square w-full items-center justify-center rounded-lg border bg-muted text-muted-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                            aria-label="{{ __('View :view image', ['view' => __($image)]) }}"
                        >
                            <svg class="size-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M3 7l9-4 9 4-9 4-9-4Z" />
                                <path d="M3 7v10l9 4 9-4V7" />
                            </svg>
                        </button>
                    </li>
                @endforeach
            </ul>
        </div>

        {{-- Details --}}
        <x-ui.card class="flex flex-col gap-6 border-none bg-transparent p-0 shadow-none lg:py-2">
            <div class="flex flex-col gap-4">
                <div>
                    <x-ui.badge variant="secondary">{{ __($brand) }}</x-ui.badge>
                </div>
                <h1 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($name) }}</h1>

                <div class="flex flex-wrap items-center gap-4">
                    <x-ui.rating :value="$rating" readOnly size="sm" />
                    <span class="text-sm font-medium text-foreground">{{ number_format((float) $rating, 1) }}</span>
                    <span class="text-sm text-muted-foreground">{{ trans_choice('(:count review)|(:count reviews)', (int) $reviewCount, ['count' => number_format((int) $reviewCount)]) }}</span>
                </div>
            </div>

            <div class="flex items-baseline gap-4">
                <span class="text-3xl font-semibold tracking-tight">{{ $price }}</span>
                @if ($comparePrice)
                    <span class="text-lg text-muted-foreground line-through">{{ $comparePrice }}</span>
                @endif
            </div>

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

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

            {{-- Size selector --}}
            <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 hover:underline">{{ __('Size guide') }}</a>
                </div>
                <x-ui.option-group name="size" model="size" :options="$sizes" />
            </fieldset>

            {{-- Quantity + actions --}}
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
                <div class="flex flex-col gap-2">
                    <span class="text-sm font-medium text-foreground">{{ __('Quantity') }}</span>
                    <x-ui.number-field variant="stepper" x-model="qty" :min="1" :max="10" :label="__('Quantity')" class="w-fit" />
                </div>
            </div>

            <form method="POST" action="{{ $action }}" class="flex flex-col gap-4 sm:flex-row">
                @csrf
                <input type="hidden" name="color" x-bind:value="color" />
                <input type="hidden" name="size" x-bind:value="size" />
                <input type="hidden" name="quantity" x-bind:value="qty" />

                <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>
                    <span class="sr-only sm:not-sr-only">{{ __('Wishlist') }}</span>
                </x-ui.button>
            </form>

            <x-ui.separator />

            {{-- Feature list --}}
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="flex items-start gap-4">
                    <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-foreground" aria-hidden="true">
                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M1 3h13v13H1zM14 8h4l3 3v5h-7" />
                            <circle cx="5.5" cy="18.5" r="2" />
                            <circle cx="18.5" cy="18.5" r="2" />
                        </svg>
                    </span>
                    <div>
                        <span class="text-sm font-medium text-foreground">{{ __('Free shipping') }}</span>
                        <span class="text-sm text-muted-foreground">{{ __('On all orders over $75.') }}</span>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-foreground" aria-hidden="true">
                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
                            <path d="M3 3v5h5" />
                        </svg>
                    </span>
                    <div>
                        <span class="text-sm font-medium text-foreground">{{ __('30-day returns') }}</span>
                        <span class="text-sm text-muted-foreground">{{ __('No questions asked.') }}</span>
                    </div>
                </div>
            </div>
        </x-ui.card>
    </div>
</section>

Installation

terminal

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

Installs these dependencies automatically:

card badge button rating separator color-swatch option-group number-field

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/product-overview-detail.blade.php

Registry dependencies

card badge button rating separator color-swatch option-group number-field

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

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

A two-column product detail page with a square image gallery and thumbnail row on the left, and brand badge, title, rating, price, colour swatches, size tiles, quantity stepper, add-to-cart and wishlist buttons, and a shipping feature list on the right.

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

## Render it

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

## Props

- `brand` (string, default `Northwind`) — Brand name shown in a badge above the title.
- `name` (string, default `Aero Knit Running Shoe`) — Product name / page title.
- `price` (string, default `$148.00`) — Current price, pre-formatted.
- `compare-price` (string, default `$180.00`) — Struck-through original price; falsy hides it.
- `rating` (float, default `4.5`) — Average rating value rendered by the read-only rating stars.
- `review-count` (int, default `128`) — Number of reviews shown beside the rating.
- `description` (string, default `A featherweight everyday trainer with a breathable engineered-knit upper, responsive foam midsole, and a grippy outsole tuned for road and track alike.`) — Product description copy.
- `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.
- `images` (mixed|null, default `null`) — Array of gallery image labels used for the thumbnail row and main image caption.
- `action` (string, default `#`) — Form action URL submitted by the add-to-cart form.

## Use when

- Building a two-column product detail page with a square image gallery and clickable thumbnail row on the left, and brand, title, rating, price, colour swatches, size tiles, a quantity stepper and add-to-cart/wishlist buttons on the right.
- Needing the gallery, colour, size and quantity controls to hold real Alpine state that is submitted with the add-to-cart form.

## Avoid when

- Needing a below-the-fold tabbed specifications table; use product-overview-tabs, or the editorial Monogram register; use product-overview-editorial.

## Rules

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

Ask about Product Overview 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 two-column product detail page with a square image gallery and clickable thumbnail row on the left, and brand, title, rating, price, colour swatches, size tiles, a quantity stepper and add-to-cart/wishlist buttons on the right.
Needing the gallery, colour, size and quantity controls to hold real Alpine state that is submitted with the add-to-cart form.

Avoid when

Needing a below-the-fold tabbed specifications table; use product-overview-tabs, or the editorial Monogram register; use product-overview-editorial.

Anti-patterns

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

Anatomy: gallery main image thumbnail row product details card brand badge rating price colour swatches size selector quantity stepper add to cart form feature list

Usage

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

resources/views/welcome.blade.php Blade

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

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.