Shoppable Reels

Open source

Shoppable video-reel rows — tall portrait reel cards with play/mute controls and tagged product popovers.

resources/views/blocks/shoppable-reels-carousel.blade.php Blade

@props([
    'heading' => 'Shop the reels',
    'subheading' => 'Watch the looks in motion, then tap a tag to add the pieces you love.',
    'reels' => null,
])

@php
    $reels ??= [
        ['title' => 'Linen wrap dress', 'price' => '$128.00', 'tag' => 'New in', 'src' => null],
        ['title' => 'Cropped denim jacket', 'price' => '$96.00', 'tag' => 'Bestseller', 'src' => null],
        ['title' => 'Pleated midi skirt', 'price' => '$84.00', 'tag' => 'Limited', 'src' => null],
        ['title' => 'Knit lounge set', 'price' => '$110.00', 'tag' => 'New in', 'src' => null],
        ['title' => 'Tailored wool coat', 'price' => '$264.00', 'tag' => 'Editor’s pick', 'src' => null],
    ];
@endphp

{{--
    shoppable-reels-01 — a horizontally scrolling row of tall 9:16 "reel" cards.
    Each card is a token `bg-muted` poster placeholder (or an optional muted autoplay
    loop <video> when a `src` is supplied) with a centered play/pause affordance, a
    mute toggle, a corner tag badge, and a bottom product chip whose popover surfaces
    a thumbnail, name, price, and add-to-cart / view actions. Inline Alpine drives the
    per-card play/mute state and a single-open product-tag popover.
    Composes <x-ui.badge>, <x-ui.button>, <x-ui.card>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<x-ui.section
    data-slot="shoppable-reels"
    x-data="{ openTag: null }"
    space="lg" {{ $attributes }}
>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="max-w-2xl">
            <h2 class="text-pretty font-heading text-2xl font-semibold tracking-tight sm:text-3xl">{{ __($heading) }}</h2>
            <p class="mt-4 text-pretty text-sm leading-relaxed text-muted-foreground sm:text-base">{{ __($subheading) }}</p>
        </div>

        <ul
            role="list"
            class="mt-8 flex snap-x snap-mandatory gap-4 overflow-x-auto pb-4 [scrollbar-width:thin]"
        >
            @foreach ($reels as $reel)
                <li
                    x-data="{ playing: {{ $reel['src'] ? 'true' : 'false' }}, muted: true }"
                    class="w-60 shrink-0 snap-start sm:w-64"
                >
                    <div class="relative aspect-[9/16] overflow-hidden rounded-lg border border-border bg-muted">
                        {{-- Media: optional muted autoplay video, else token poster placeholder --}}
                        @if ($reel['src'])
                            <video
                                x-ref="video"
                                :muted="muted"
                                src="{{ $reel['src'] }}"
                                class="size-full object-cover"
                                muted
                                loop
                                autoplay
                                playsinline
                            ></video>
                        @else
                            <div
                                role="img"
                                aria-label="{{ __('Reel preview for :title', ['title' => __($reel['title'])]) }}"
                                class="flex size-full items-center justify-center text-muted-foreground"
                            >
                                <svg class="size-14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <rect x="2" y="2" width="20" height="20" rx="2.18" />
                                    <path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5" />
                                </svg>
                            </div>
                        @endif

                        {{-- Tag badge — top start --}}
                        @if (! empty($reel['tag']))
                            <div class="absolute start-3 top-3">
                                <x-ui.badge variant="secondary" class="shadow-sm backdrop-blur">{{ __($reel['tag']) }}</x-ui.badge>
                            </div>
                        @endif

                        {{-- Mute toggle — top end --}}
                        <button
                            type="button"
                            x-on:click="muted = ! muted; $refs.video && ($refs.video.muted = muted)"
                            :aria-pressed="muted"
                            aria-label="{{ __('Toggle sound') }}"
                            class="absolute end-3 top-3 flex size-9 items-center justify-center rounded-full bg-background/80 text-foreground shadow-md ring-ring backdrop-blur transition hover:bg-background focus-visible:outline-none focus-visible:ring-2"
                        >
                            <svg x-show="muted" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M11 4.7 6 9H2v6h4l5 4.3z" />
                                <path d="m22 9-6 6M16 9l6 6" />
                            </svg>
                            <svg x-show="! muted" x-cloak class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M11 4.7 6 9H2v6h4l5 4.3z" />
                                <path d="M16 9a5 5 0 0 1 0 6M19.5 6.5a9 9 0 0 1 0 11" />
                            </svg>
                        </button>

                        {{-- Centered play / pause affordance --}}
                        <button
                            type="button"
                            x-on:click="playing = ! playing; $refs.video && (playing ? $refs.video.play() : $refs.video.pause())"
                            :aria-pressed="playing"
                            aria-label="{{ __('Play or pause :title', ['title' => __($reel['title'])]) }}"
                            class="absolute left-1/2 top-1/2 flex size-14 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-background/85 text-foreground shadow-lg ring-ring backdrop-blur transition hover:bg-background focus-visible:outline-none focus-visible:ring-2"
                        >
                            <svg x-show="! playing" class="relative ms-0.5 size-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                <path d="m7 4 13 8-13 8z" />
                            </svg>
                            <svg x-show="playing" x-cloak class="size-6" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                <rect x="6" y="5" width="4" height="14" rx="1" />
                                <rect x="14" y="5" width="4" height="14" rx="1" />
                            </svg>
                        </button>

                        {{-- Bottom product chip + popover --}}
                        <div class="absolute inset-x-0 bottom-0 p-4">
                            {{-- Popover — opens above the chip, one at a time --}}
                            <div
                                x-show="openTag === {{ $loop->index }}"
                                x-transition
                                x-cloak
                                class="mb-2"
                            >
                                <x-ui.card class="p-4 shadow-xl">
                                    <h3 class="truncate text-sm font-semibold tracking-tight text-foreground">{{ __($reel['title']) }}</h3>
                                    <p class="mt-0.5 text-sm font-medium text-muted-foreground">{{ $reel['price'] }}</p>
                                    <div class="mt-4 flex items-center gap-2">
                                        <x-ui.button size="sm" class="flex-1">{{ __('Add to cart') }}</x-ui.button>
                                        <x-ui.button size="sm" variant="outline" class="flex-1">{{ __('View') }}</x-ui.button>
                                    </div>
                                </x-ui.card>
                            </div>

                            {{-- Chip: info toggle + quick add (siblings — no nested buttons) --}}
                            <div class="flex items-center gap-2 rounded-md border border-border bg-background/85 p-2 shadow-lg backdrop-blur">
                                <button
                                    type="button"
                                    x-on:click="openTag = openTag === {{ $loop->index }} ? null : {{ $loop->index }}"
                                    :aria-expanded="openTag === {{ $loop->index }}"
                                    aria-label="{{ __('Show details for :title', ['title' => __($reel['title'])]) }}"
                                    class="flex min-w-0 flex-1 items-center gap-4 rounded-lg text-start ring-ring transition focus-visible:outline-none focus-visible:ring-2"
                                >
                                    <span class="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
                                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
                                            <path d="M3 6h18" />
                                            <path d="M16 10a4 4 0 0 1-8 0" />
                                        </svg>
                                    </span>
                                    <span class="min-w-0">
                                        <span class="block truncate text-sm font-semibold tracking-tight text-foreground">{{ __($reel['title']) }}</span>
                                        <span class="block text-sm font-medium text-muted-foreground">{{ $reel['price'] }}</span>
                                    </span>
                                </button>
                                <x-ui.button size="sm" class="shrink-0">{{ __('Add') }}</x-ui.button>
                            </div>
                        </div>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/shoppable-reels-carousel

Installs these dependencies automatically:

badge button card section

Registry contract

Install confidence

php artisan ui:add blocks/shoppable-reels-carousel 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/shoppable-reels-carousel.blade.php

Registry dependencies

badge button card section

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.

shoppable-reels-carousel.md

# Brok UI block: Shoppable Reels (`shoppable-reels-carousel`)

A shoppable video reels section with a heading above a horizontally scrolling row of tall 9:16 portrait reel cards, each a token media placeholder (or optional muted autoplay video) with a centered play/pause affordance, a mute toggle, a corner tag badge, and a bottom product chip that opens a popover card with thumbnail, name, price, and add-to-cart and view 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/shoppable-reels-carousel
```

## Render it

```blade
<x-blocks.shoppable-reels-carousel />
```

## Props

- `heading` (string, default `Shop the reels`) — Section heading.
- `subheading` (string, default `Watch the looks in motion, then tap a tag to add the pieces you love.`) — Supporting copy under the heading.
- `reels` (mixed|null, default `null`) — Reel entries with a title, price, tag label and optional video source; null falls back to sample data.

## Use when

- Showcasing short vertical product videos in a horizontally scrolling reel row with tappable product tags.
- Wanting the content to be video-first rather than static photography.

## Avoid when

- Tagging products on static photos instead of video; use shop-the-look-hotspots or shop-the-look-lookbook instead.

## Rules

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

Ask about Shoppable Reels 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

Showcasing short vertical product videos in a horizontally scrolling reel row with tappable product tags.
Wanting the content to be video-first rather than static photography.

Avoid when

Tagging products on static photos instead of video; use shop-the-look-hotspots or shop-the-look-lookbook instead.

Anti-patterns

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

Anatomy: root shoppable-reels

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.shoppable-reels-carousel />

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.