Wishlist

Open source

Saved-item wishlists — a card grid and a data-dense table layout.

2 of 2

resources/views/blocks/wishlist-table.blade.php Blade

@props([
    'heading' => 'Your wishlist',
    'items' => null,
])

@php
    $items ??= [
        [
            'name'      => 'Aero Knit Runner',
            'variant'   => 'Midnight, UK 9',
            'price'     => '$118.00',
            'compareAt' => '$148.00',
            'stock'     => 'in',   // 'in' | 'low' | 'out'
        ],
        [
            'name'      => 'Merino Travel Crew',
            'variant'   => 'Oatmeal, L',
            'price'     => '$96.00',
            'compareAt' => null,
            'stock'     => 'in',
        ],
        [
            'name'      => 'Cascade Weatherproof Shell',
            'variant'   => 'Forest, M',
            'price'     => '$214.00',
            'compareAt' => '$260.00',
            'stock'     => 'out',
        ],
        [
            'name'      => 'Field Canvas Tote',
            'variant'   => 'Natural, One size',
            'price'     => '$72.00',
            'compareAt' => null,
            'stock'     => 'low',
        ],
        [
            'name'      => 'Studio Linen Shirt',
            'variant'   => 'Chalk, S',
            'price'     => '$84.00',
            'compareAt' => '$110.00',
            'stock'     => 'in',
        ],
    ];

    $itemCount = count($items);
@endphp

<x-ui.section
    aria-label="{{ __('Wishlist') }}"
    data-slot="wishlist-02"
    space="lg" {{ $attributes }}
>
    <x-ui.container gutter="sm">

        {{-- Header --}}
        <header class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-baseline gap-4">
                <h2 class="text-2xl font-bold tracking-tight sm:text-3xl">{{ __($heading) }}</h2>
                <span class="text-sm text-muted-foreground" aria-live="polite">
                    {{ trans_choice(':count item|:count items', $itemCount, ['count' => $itemCount]) }}
                </span>
            </div>
            <x-ui.button size="sm" type="button">
                <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">
                        <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 all to cart') }}
            </x-ui.button>
        </header>

        {{-- Table --}}
        <div class="mt-6 overflow-x-auto rounded-lg border border-border">
            <x-ui.table>
                <x-ui.table.header>
                    <x-ui.table.row class="border-b border-border">
                        <x-ui.table.head scope="col" class="ps-4 text-start">{{ __('Product') }}</x-ui.table.head>
                        <x-ui.table.head scope="col" class="text-end">{{ __('Price') }}</x-ui.table.head>
                        <x-ui.table.head scope="col" class="text-start">{{ __('Availability') }}</x-ui.table.head>
                        <x-ui.table.head scope="col" class="pe-4 text-end">{{ __('Actions') }}</x-ui.table.head>
                    </x-ui.table.row>
                </x-ui.table.header>

                <x-ui.table.body>
                    @foreach ($items as $item)
                        @php
                            $outOfStock = $item['stock'] === 'out';
                            $badgeVariant = match ($item['stock']) {
                                'in'  => 'success',
                                'low' => 'secondary',
                                default => 'destructive',
                            };
                            $badgeLabel = match ($item['stock']) {
                                'in'  => __('In stock'),
                                'low' => __('Low stock'),
                                default => __('Out of stock'),
                            };
                        @endphp
                        <x-ui.table.row class="border-b border-border last:border-0">

                            {{-- Product --}}
                            <x-ui.table.cell class="ps-4">
                                <div class="flex items-center gap-4">
                                    <div
                                        class="size-14 shrink-0 overflow-hidden rounded-lg bg-muted"
                                        aria-hidden="true"
                                    >
                                        <svg class="size-full text-muted-foreground/30" viewBox="0 0 56 56" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid slice">
                                            <circle cx="28" cy="22" r="9" />
                                            <path d="M10 48c0-9.9 8.1-18 18-18s18 8.1 18 18" />
                                        </svg>
                                    </div>
                                    <div class="min-w-0">
                                        <p class="truncate font-medium text-foreground">{{ __($item['name']) }}</p>
                                        <p class="mt-0.5 truncate text-sm text-muted-foreground">{{ __($item['variant']) }}</p>
                                    </div>
                                </div>
                            </x-ui.table.cell>

                            {{-- Price --}}
                            <x-ui.table.cell class="text-end">
                                <div class="flex flex-col items-end gap-0.5">
                                    <span class="tabular-nums font-semibold text-foreground">{{ $item['price'] }}</span>
                                    @if (!empty($item['compareAt']))
                                        <span class="tabular-nums text-sm text-muted-foreground line-through">{{ $item['compareAt'] }}</span>
                                    @endif
                                </div>
                            </x-ui.table.cell>

                            {{-- Availability --}}
                            <x-ui.table.cell>
                                <x-ui.badge :variant="$badgeVariant">{{ $badgeLabel }}</x-ui.badge>
                            </x-ui.table.cell>

                            {{-- Actions --}}
                            <x-ui.table.cell class="pe-4">
                                <div class="flex items-center justify-end gap-2">
                                    <x-ui.button
                                        size="sm"
                                        type="button"
                                        :disabled="$outOfStock"
                                        aria-label="{{ __('Add :name to cart', ['name' => $item['name']]) }}"
                                    >
                                        {{ __('Add to cart') }}
                                    </x-ui.button>

                                    <x-ui.button
                                        variant="ghost"
                                        size="icon"
                                        type="button"
                                        aria-label="{{ __('Remove :name from wishlist', ['name' => $item['name']]) }}"
                                    >
                                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M3 6h18" />
                                            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
                                            <path d="M10 11v6" />
                                            <path d="M14 11v6" />
                                            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
                                        </svg>
                                    </x-ui.button>
                                </div>
                            </x-ui.table.cell>

                        </x-ui.table.row>
                    @endforeach
                </x-ui.table.body>
            </x-ui.table>
        </div>

    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/wishlist-table

Installs these dependencies automatically:

badge button container section table

Registry contract

Install confidence

php artisan ui:add blocks/wishlist-table 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/wishlist-table.blade.php

Registry dependencies

badge button container section table

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.

wishlist-table.md

# Brok UI block: Wishlist Table (`wishlist-table`)

Data-dense table layout for saved wishlist items with thumbnail, price comparison, stock badge, and per-row add-to-cart and remove actions.

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/wishlist-table
```

## Render it

```blade
<x-blocks.wishlist-table />
```

## Props

- `heading` (string, default `Your wishlist`) — Section heading.
- `items` (mixed|null, default `null`) — Saved product rows with name, variant, price, compare-at price and stock state; null falls back to sample data.

## Use when

- Showing saved items in a dense table with thumbnail, price comparison and stock badge per row.
- Wanting tabular scanning rather than a card grid.

## Avoid when

- Wanting a visual card grid instead of a table; use wishlist-grid instead.

## Rules

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

Ask about Wishlist Table 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 saved items in a dense table with thumbnail, price comparison and stock badge per row.
Wanting tabular scanning rather than a card grid.

Avoid when

Wanting a visual card grid instead of a table; use wishlist-grid instead.

Anti-patterns

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

Anatomy: root wishlist-02

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.wishlist-table />

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.