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-tabs.blade.php Blade

@props([
    'brand'        => 'Verd Studio',
    'category'     => 'Accessories',
    'name'         => 'Merino Field Watch',
    'sku'          => 'VS-FW-112',
    'price'        => '$229.00',
    'comparePrice' => '$275.00',
    'badge'        => 'New arrival',
    'rating'       => 4,
    'reviewCount'  => 93,
    'blurb'        => 'A Swiss-movement field watch with a 38 mm stainless case, sapphire crystal, and a hand-stitched Merino wool strap. Designed for all-day wear.',
    'colors'       => null,
    'sizes'        => null,
    'specs'        => null,
    'action'       => '#',
])

@php
    $colors ??= [['name' => 'Midnight', 'class' => 'bg-foreground'], ['name' => 'Chalk', 'class' => 'bg-muted-foreground'], ['name' => 'Forest', 'class' => 'bg-primary'], ['name' => 'Terracotta', 'class' => 'bg-accent-foreground']];
    $sizes ??= ['S / 16 cm', 'M / 18 cm', 'L / 20 cm', 'XL / 22 cm'];
    $swatches = collect($colors)->map(fn ($color) => ['value' => $color['value'] ?? $color['name'], 'label' => __($color['name']), 'token' => $color['class']])->values()->all();
    $specs ??= [[__('Case diameter'), '38 mm'], [__('Case material'), __('316L stainless steel')], [__('Crystal'), __('Anti-reflective sapphire')], [__('Movement'), __('Swiss quartz')], [__('Water resistance'), '5 ATM (50 m)'], [__('Strap'), __('Hand-stitched Merino wool')], [__('Warranty'), __('2-year international')]];
    $tabs = [['id' => 'description', 'label' => __('Description')], ['id' => 'specifications', 'label' => __('Specifications')]];
    $features = [__('Swiss ETA quartz movement, high accuracy'), __('Anti-reflective sapphire crystal, 9H hardness'), __('5 ATM water resistance'), __('Quick-release spring bars for tool-free strap swaps'), __('Hypoallergenic 316L stainless steel case')];
@endphp

<x-ui.section space="lg" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <div class="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-16">
            <div class="relative aspect-square overflow-hidden rounded-lg bg-gradient-to-br from-muted to-accent" role="img" aria-label="{{ __($name) }}">
                <span class="absolute bottom-5 start-5 rounded-full bg-background/80 px-4 py-2 text-sm font-semibold uppercase tracking-widest text-foreground backdrop-blur-sm">{{ __($brand) }}</span>
            </div>

            <div class="flex flex-col gap-6">
                <div class="flex flex-col gap-2">
                    <p class="text-sm font-semibold uppercase tracking-widest text-muted-foreground">{{ __($category) }}</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">{{ $price }}</span>
                    @if ($comparePrice)<span class="text-xl text-muted-foreground line-through">{{ $comparePrice }}</span>@endif
                    @if ($badge)<x-ui.badge variant="secondary">{{ __($badge) }}</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">{{ __($blurb) }}</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">
                    <legend class="text-sm font-medium text-foreground">{{ __('Strap size') }}</legend>
                    <x-ui.option-group name="size" :options="$sizes" :selected="$sizes[0] ?? null" />
                </fieldset>

                <form method="POST" action="{{ $action }}" class="flex flex-col gap-4 sm:flex-row">
                    @csrf
                    <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">{{ __('Wishlist') }}</x-ui.button>
                </form>
            </div>
        </div>

        <div class="mt-16 border-t border-border pt-8">
            <x-ui.tabs default="description">
                <x-ui.tabs.list aria-label="{{ __('Product information tabs') }}">
                    @foreach ($tabs as $tab)
                        <x-ui.tabs.trigger :value="$tab['id']">{{ $tab['label'] }}</x-ui.tabs.trigger>
                    @endforeach
                </x-ui.tabs.list>

                <x-ui.tabs.content value="description" class="mt-10 grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-16">
                    <div class="flex flex-col gap-6 leading-relaxed text-muted-foreground">
                        <h2 class="text-xl font-semibold text-foreground">{{ __('Crafted to outlast trends') }}</h2>
                        <p>{{ __('The Field Watch draws on mid-century military aesthetics with the precision finishing of contemporary Swiss manufacture. Every component is selected for longevity and tactile quality.') }}</p>
                        <ul class="flex flex-col gap-4" role="list">
                            @foreach ($features as $feat)
                                <li class="flex items-start gap-4">
                                    <svg class="mt-0.5 size-5 shrink-0 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
                                    <span class="text-sm text-muted-foreground">{{ $feat }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </x-ui.tabs.content>

                <x-ui.tabs.content value="specifications" class="mt-10">
                    <h2 class="mb-6 text-xl font-semibold text-foreground">{{ __('Specifications') }}</h2>
                    <table class="w-full text-sm">
                        <caption class="sr-only">{{ __('Technical specifications') }}</caption>
                        <tbody class="divide-y divide-border">
                            @foreach ($specs as [$key, $val])
                                <tr>
                                    <th scope="row" class="w-1/2 py-4 pe-4 text-start font-medium text-foreground">{{ $key }}</th>
                                    <td class="w-1/2 py-4 ps-4 text-muted-foreground">{{ $val }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </x-ui.tabs.content>
            </x-ui.tabs>
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

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

Installs these dependencies automatically:

badge button color-swatch container option-group rating section tabs

Registry contract

Install confidence

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

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

Registry dependencies

badge button color-swatch container option-group rating section tabs

Package dependencies

composer: jml/brok:^0.2

npm: alpinejs

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

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

A product detail layout with an image, buying options, and a below-the-fold tabbed description with a specifications table.

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

## Render it

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

## Props

- `brand` (string, default `Verd Studio`) — Brand name shown over the hero image.
- `category` (string, default `Accessories`) — Category label shown above the title.
- `name` (string, default `Merino Field Watch`) — Product name / page title.
- `sku` (string, default `VS-FW-112`) — SKU code shown under the title.
- `price` (string, default `$229.00`) — Current price, pre-formatted.
- `compare-price` (string, default `$275.00`) — Struck-through original price; falsy hides it.
- `badge` (string, default `New arrival`) — Status badge label (e.g. "New arrival"); falsy hides it.
- `rating` (int, default `4`) — Average rating value rendered by the display-only rating stars.
- `review-count` (int, default `93`) — Number of reviews linked from the rating row.
- `blurb` (string, default `A Swiss-movement field watch with a 38 mm stainless case, sapphire crystal, and a hand-stitched Merino wool strap. Designed for all-day wear.`) — Short product description shown beside the buying options.
- `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.
- `specs` (mixed|null, default `null`) — Array of [label, value] pairs rendered as rows in the specifications table.
- `action` (string, default `#`) — Form action URL submitted by the add-to-cart form.

## Use when

- Building a product detail layout with a single hero image, buying options (colour, size, add-to-cart), and a below-the-fold description plus a specifications table.
- Needing an in-page specs table for technical products (dimensions, materials, warranty) alongside a features list.

## Avoid when

- Needing a real image gallery with switchable thumbnails; use product-overview-detail or product-overview-gallery instead.

## Rules

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

Ask about Product Overview Tabs 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 single hero image, buying options (colour, size, add-to-cart), and a below-the-fold description plus a specifications table.
Needing an in-page specs table for technical products (dimensions, materials, warranty) alongside a features list.

Avoid when

Needing a real image gallery with switchable thumbnails; use product-overview-detail or product-overview-gallery instead.

Anti-patterns

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

Anatomy: hero image product details category title sku price badge rating colour swatches size selector add to cart form description/specifications tabs description features list specifications table

Usage

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

resources/views/welcome.blade.php Blade

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

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.