Product Recommendations

Open source

Cross-sell strips — a "you may also like" grid of recommended product cards.

resources/views/blocks/product-recommendations-grid.blade.php Blade

@props([
    'eyebrow' => 'Curated for you',
    'heading' => 'You May Also Like',
    'subheading' => 'A few pieces from the atelier that pair effortlessly with your selection.',
    'products' => null,
    'currency' => 'USD',
])

{{--
    product-recommendations-01 — "You May Also Like" Monogram recommendations strip.
    Distinct from product-listing-editorial (a scrolling rail): this is a STATIC, fully
    visible responsive grid (2→4 cols) of <x-ui.product-card> tiles: an optional
    sale badge, an uppercase category line, the name, a price with optional
    compare-at, and a quick-add action (no rating, no wishlist). Static Blade.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
@php
    $products ??= [
        [
            'name' => 'Curved Shoulder Bag',
            'category' => 'Leather Goods',
            'price' => '248',
            'compareAt' => null,
            'sale' => null,
        ],
        [
            'name' => 'Monogram Card Holder',
            'category' => 'Small Leather Goods',
            'price' => '96',
            'compareAt' => '120',
            'sale' => 'Save 20%',
        ],
        [
            'name' => 'Structured Tote',
            'category' => 'Bags',
            'price' => '312',
            'compareAt' => null,
            'sale' => null,
        ],
        [
            'name' => 'Heritage Silk Scarf',
            'category' => 'Accessories',
            'price' => '110',
            'compareAt' => '138',
            'sale' => 'Save 20%',
        ],
    ];
@endphp

<section
    {{ $attributes->merge(['class' => 'bg-background py-16 text-foreground sm:py-20']) }}
    data-slot="product-recommendations"
    aria-label="{{ __($heading) }}"
>
    <div class="mx-auto max-w-7xl px-6 sm:px-8 lg:px-12">
        {{-- ── Section header ── --}}
        <header class="flex flex-col items-start gap-2">
            @if ($eyebrow)
                <p class="font-body text-sm uppercase tracking-[0.3em] text-muted-foreground">
                    {{ __($eyebrow) }}
                </p>
            @endif
            <h2 class="font-heading text-3xl font-normal tracking-tight sm:text-4xl">
                {{ __($heading) }}
            </h2>
            @if ($subheading)
                <p class="mt-2 max-w-xl text-pretty font-body text-base text-muted-foreground">
                    {{ __($subheading) }}
                </p>
            @endif
        </header>

        {{-- ── Recommendations grid ── --}}
        <ul role="list" class="mt-10 grid grid-cols-2 gap-x-6 gap-y-10 lg:grid-cols-4">
            @foreach ($products as $product)
                <li>
                    <x-ui.product-card :product="$product" :currency="$currency" :show-rating="false" :show-wishlist="false" />
                </li>
            @endforeach
        </ul>
    </div>
</section>

Installation

terminal

php artisan ui:add blocks/product-recommendations-grid

Installs these dependencies automatically:

product-card

Registry contract

Install confidence

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

Registry dependencies

product-card

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-recommendations-grid.md

# Brok UI block: Product Recommendations (`product-recommendations-grid`)

A static "you may also like" recommendations strip — an editorial font-heading heading above a responsive 2-to-4-column grid of product cards with a tall media placeholder, optional sale badge, name, price with optional compare-at, and a quick add-to-cart action.

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-recommendations-grid
```

## Render it

```blade
<x-blocks.product-recommendations-grid />
```

## Props

- `eyebrow` (string, default `Curated for you`) — Small label shown above the heading.
- `heading` (string, default `You May Also Like`) — Section heading text.
- `subheading` (string, default `A few pieces from the atelier that pair effortlessly with your selection.`) — Supporting copy under the heading.
- `products` (mixed|null, default `null`) — Array of {name, category, price, compareAt, sale} product rows; null falls back to a default 4-item sample set.
- `currency` (string, default `USD`) — Currency code passed to each product-card's price formatting.

## Use when

- Showing a static, fully visible responsive grid of 2 to 4 product cards as a "You May Also Like" or related-products strip.
- Use when you want simple quick-add tiles without a rating, wishlist icon, or horizontal scroll.

## Avoid when

- Needing a horizontally scrolling carousel of products instead of a fully visible grid; use product-listing-editorial instead.

## Rules

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

Ask about Product Recommendations 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 static, fully visible responsive grid of 2 to 4 product cards as a "You May Also Like" or related-products strip.
Use when you want simple quick-add tiles without a rating, wishlist icon, or horizontal scroll.

Avoid when

Needing a horizontally scrolling carousel of products instead of a fully visible grid; use product-listing-editorial instead.

Anti-patterns

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

Anatomy: section header (eyebrow, heading, subheading) product grid product-card tiles

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.product-recommendations-grid />

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.