Product Listing
Shop grids — a sort/results toolbar above a responsive grid of product cards with sale badge, rating and add-to-cart.
Preview
Previous
4 of 4
resources/views/blocks/product-listing-editorial.blade.php
@props([
'eyebrow' => 'Just landed',
'heading' => 'The Daily Edit',
'subheading' => 'A rotating selection of the pieces our studio is reaching for this week.',
'products' => null,
'currency' => 'USD',
])
@php
$products ??= [
[
'name' => 'Atelier Wool Overshirt',
'category' => 'Outerwear',
'price' => '155',
'compareAt' => null,
'sale' => null,
],
[
'name' => 'Monogram Silk Scarf',
'category' => 'Accessories',
'price' => '110',
'compareAt' => '136',
'sale' => 'Save 19%',
],
[
'name' => 'Heritage Leather Belt',
'category' => 'Leather Goods',
'price' => '102',
'compareAt' => null,
'sale' => null,
],
[
'name' => 'Studio Linen Trouser',
'category' => 'Ready-to-Wear',
'price' => '138',
'compareAt' => null,
'sale' => 'New',
],
[
'name' => 'Cashmere Crew Knit',
'category' => 'Knitwear',
'price' => '135',
'compareAt' => '152',
'sale' => 'Save $17',
],
[
'name' => 'Maison Canvas Cap',
'category' => 'Accessories',
'price' => '96',
'compareAt' => null,
'sale' => null,
],
[
'name' => 'Tailored Cotton Blazer',
'category' => 'Tailoring',
'price' => '149',
'compareAt' => null,
'sale' => null,
],
];
@endphp
{{--
product-carousel-01 — "The Daily Edit" Monogram product slider.
Editorial section heading + a horizontally scrolling, snap-aligned row of
product cards driven by inline Alpine (prev/next controls scroll the track by
one card; buttons disable at the ends). RTL-aware: scroll direction and the
chevron icons mirror under dir="rtl".
Each slide is a <x-ui.product-card> (no rating, wishlist or quick-add, so
the rail stays a quiet editorial strip). Composes <x-ui.button>.
Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<section
{{ $attributes->merge(['class' => 'bg-background py-16 text-foreground sm:py-20']) }}
data-slot="product-carousel"
x-data="{
atStart: true,
atEnd: false,
rtl: false,
init() {
this.rtl = getComputedStyle(this.$refs.track).direction === 'rtl';
this.$nextTick(() => this.update());
},
update() {
const t = this.$refs.track;
const max = t.scrollWidth - t.clientWidth;
const pos = Math.abs(t.scrollLeft);
this.atStart = pos <= 1;
this.atEnd = pos >= max - 1;
},
scroll(dir) {
const t = this.$refs.track;
const card = t.firstElementChild;
const gap = parseFloat(getComputedStyle(t).columnGap) || 24;
const step = card ? card.offsetWidth + gap : t.clientWidth * 0.8;
t.scrollBy({ left: step * (this.rtl ? -dir : dir), behavior: 'smooth' });
}
}"
x-on:resize.window="update()"
>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{{-- Heading + controls --}}
<div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
<header class="max-w-2xl">
@if ($eyebrow)
<p class="font-body text-sm font-semibold uppercase tracking-widest text-muted-foreground">{{ __($eyebrow) }}</p>
@endif
<h2 class="mt-2 text-balance font-heading text-3xl tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
@if ($subheading)
<p class="mt-4 text-pretty text-base text-muted-foreground sm:text-lg">{{ __($subheading) }}</p>
@endif
</header>
{{-- Prev / next controls --}}
<div class="flex shrink-0 items-center gap-2">
<x-ui.button
variant="outline"
size="icon"
type="button"
class="rounded-full"
x-on:click="scroll(-1)"
x-bind:disabled="atStart"
aria-label="{{ __('Previous products') }}"
>
<svg class="size-5 rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m15 18-6-6 6-6" />
</svg>
</x-ui.button>
<x-ui.button
variant="outline"
size="icon"
type="button"
class="rounded-full"
x-on:click="scroll(1)"
x-bind:disabled="atEnd"
aria-label="{{ __('Next products') }}"
>
<svg class="size-5 rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m9 18 6-6-6-6" />
</svg>
</x-ui.button>
</div>
</div>
{{-- Scroll-snap track --}}
<ul
x-ref="track"
x-on:scroll.passive="update()"
role="list"
class="-mx-4 mt-10 flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth px-4 pb-4 [scrollbar-width:none] sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 [&::-webkit-scrollbar]:hidden"
>
@foreach ($products as $product)
<li class="w-64 shrink-0 snap-start sm:w-72">
<x-ui.product-card :product="$product" :currency="$currency" :show-rating="false" :show-wishlist="false" :show-actions="false" />
</li>
@endforeach
</ul>
</div>
</section>Installation
terminal
php artisan ui:add blocks/product-listing-editorialRegistry contract
Install confidence
php artisan ui:add blocks/product-listing-editorial
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-listing-editorial.blade.php |
Registry dependencies
product-card
button
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-listing-editorial.md
# Brok UI block: Product Carousel (`product-listing-editorial`)
An editorial horizontal product carousel with a font-heading section title and prev/next controls that scroll a snap-aligned track of product cards (placeholder media, name, price, optional sale badge), RTL-aware and keyboard accessible.
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-listing-editorial
```
## Render it
```blade
<x-blocks.product-listing-editorial />
```
## Props
- `eyebrow` (string, default `Just landed`) — Small label shown above the heading.
- `heading` (string, default `The Daily Edit`) — Section heading.
- `subheading` (string, default `A rotating selection of the pieces our studio is reaching for this week.`) — Supporting copy under the heading.
- `products` (mixed|null, default `null`) — Array of product entries rendered in the scroll track.
- `currency` (string, default `USD`) — ISO currency code used to format product prices.
## Use when
- Rendering an editorial horizontal product carousel with working prev/next buttons that smooth-scroll a snap-aligned track of product cards, disabling each control at the start/end of the track.
- Wanting RTL-aware, keyboard-accessible scrolling rather than the purely decorative scroll buttons in product-listing-carousel.
## Avoid when
- Needing a full grid layout with a sort toolbar and filters instead of a scrollable rail; use product-listing-grid instead.
## Rules
- Render the installed block with `<x-blocks.product-listing-editorial />` 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-listing-editorial
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/product-listing-editorial.json
Ask about Product Carousel 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
- Rendering an editorial horizontal product carousel with working prev/next buttons that smooth-scroll a snap-aligned track of product cards, disabling each control at the start/end of the track.
- Wanting RTL-aware, keyboard-accessible scrolling rather than the purely decorative scroll buttons in product-listing-carousel.
Avoid when
- Needing a full grid layout with a sort toolbar and filters instead of a scrollable rail; use product-listing-grid instead.
Anti-patterns
- Do not replace semantic props with conflicting utility classes.
- Do not remove labels, focus styles, or state attributes.
- Anatomy
Usage
Render the block as a component, passing data where useful:
resources/views/welcome.blade.php
<x-blocks.product-listing-editorial />Built from primitives
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.
resources/views/blocks/product-listing-editorial.blade.php
@props([
'eyebrow' => 'Just landed',
'heading' => 'The Daily Edit',
'subheading' => 'A rotating selection of the pieces our studio is reaching for this week.',
'products' => null,
'currency' => 'USD',
])
@php
$products ??= [
[
'name' => 'Atelier Wool Overshirt',
'category' => 'Outerwear',
'price' => '155',
'compareAt' => null,
'sale' => null,
],
[
'name' => 'Monogram Silk Scarf',
'category' => 'Accessories',
'price' => '110',
'compareAt' => '136',
'sale' => 'Save 19%',
],
[
'name' => 'Heritage Leather Belt',
'category' => 'Leather Goods',
'price' => '102',
'compareAt' => null,
'sale' => null,
],
[
'name' => 'Studio Linen Trouser',
'category' => 'Ready-to-Wear',
'price' => '138',
'compareAt' => null,
'sale' => 'New',
],
[
'name' => 'Cashmere Crew Knit',
'category' => 'Knitwear',
'price' => '135',
'compareAt' => '152',
'sale' => 'Save $17',
],
[
'name' => 'Maison Canvas Cap',
'category' => 'Accessories',
'price' => '96',
'compareAt' => null,
'sale' => null,
],
[
'name' => 'Tailored Cotton Blazer',
'category' => 'Tailoring',
'price' => '149',
'compareAt' => null,
'sale' => null,
],
];
@endphp
{{--
product-carousel-01 — "The Daily Edit" Monogram product slider.
Editorial section heading + a horizontally scrolling, snap-aligned row of
product cards driven by inline Alpine (prev/next controls scroll the track by
one card; buttons disable at the ends). RTL-aware: scroll direction and the
chevron icons mirror under dir="rtl".
Each slide is a <x-ui.product-card> (no rating, wishlist or quick-add, so
the rail stays a quiet editorial strip). Composes <x-ui.button>.
Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<section
{{ $attributes->merge(['class' => 'bg-background py-16 text-foreground sm:py-20']) }}
data-slot="product-carousel"
x-data="{
atStart: true,
atEnd: false,
rtl: false,
init() {
this.rtl = getComputedStyle(this.$refs.track).direction === 'rtl';
this.$nextTick(() => this.update());
},
update() {
const t = this.$refs.track;
const max = t.scrollWidth - t.clientWidth;
const pos = Math.abs(t.scrollLeft);
this.atStart = pos <= 1;
this.atEnd = pos >= max - 1;
},
scroll(dir) {
const t = this.$refs.track;
const card = t.firstElementChild;
const gap = parseFloat(getComputedStyle(t).columnGap) || 24;
const step = card ? card.offsetWidth + gap : t.clientWidth * 0.8;
t.scrollBy({ left: step * (this.rtl ? -dir : dir), behavior: 'smooth' });
}
}"
x-on:resize.window="update()"
>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{{-- Heading + controls --}}
<div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
<header class="max-w-2xl">
@if ($eyebrow)
<p class="font-body text-sm font-semibold uppercase tracking-widest text-muted-foreground">{{ __($eyebrow) }}</p>
@endif
<h2 class="mt-2 text-balance font-heading text-3xl tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
@if ($subheading)
<p class="mt-4 text-pretty text-base text-muted-foreground sm:text-lg">{{ __($subheading) }}</p>
@endif
</header>
{{-- Prev / next controls --}}
<div class="flex shrink-0 items-center gap-2">
<x-ui.button
variant="outline"
size="icon"
type="button"
class="rounded-full"
x-on:click="scroll(-1)"
x-bind:disabled="atStart"
aria-label="{{ __('Previous products') }}"
>
<svg class="size-5 rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m15 18-6-6 6-6" />
</svg>
</x-ui.button>
<x-ui.button
variant="outline"
size="icon"
type="button"
class="rounded-full"
x-on:click="scroll(1)"
x-bind:disabled="atEnd"
aria-label="{{ __('Next products') }}"
>
<svg class="size-5 rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m9 18 6-6-6-6" />
</svg>
</x-ui.button>
</div>
</div>
{{-- Scroll-snap track --}}
<ul
x-ref="track"
x-on:scroll.passive="update()"
role="list"
class="-mx-4 mt-10 flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth px-4 pb-4 [scrollbar-width:none] sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 [&::-webkit-scrollbar]:hidden"
>
@foreach ($products as $product)
<li class="w-64 shrink-0 snap-start sm:w-72">
<x-ui.product-card :product="$product" :currency="$currency" :show-rating="false" :show-wishlist="false" :show-actions="false" />
</li>
@endforeach
</ul>
</div>
</section>
Ownership & lifecycle
Owner, release state, review evidence and adoption for this item.
- Owner
- Platform UI (@JoshJML)
- Current version
-
1.1.1 - Status
- Stable
- License
-
open - Deprecation
- Not deprecated
- Contract
-
v1 - Foundation
-
≥ 1.0.0