Checkout

Open source

Checkout pages — a contact/shipping/payment form beside a sticky order-summary card with promo code and totals.

resources/views/blocks/checkout-stepper.blade.php Blade

@props([
    'action'      => '#',
    'currentStep' => 2,
    'currency'    => '$',
    'items'       => null,
    'subtotal'    => '149.00',
    'shipping'    => '8.00',
    'total'       => '157.00',
])

@php
    $steps = [
        1 => __('Cart'),
        2 => __('Shipping'),
        3 => __('Payment'),
        4 => __('Review'),
    ];

    $items ??= [
        ['name' => 'Merino Crew Neck Sweater', 'variant' => 'Navy / M', 'qty' => 1, 'price' => '89.00'],
        ['name' => 'Leather Belt', 'variant' => 'Tan / 32"', 'qty' => 1, 'price' => '45.00'],
        ['name' => 'Canvas Tote Bag', 'variant' => 'Natural', 'qty' => 1, 'price' => '15.00'],
    ];

    // The progress rail is the stepper primitive: a step before the current one
    // is completed, the current one is active, the rest wait as default.
    $progressSteps = collect($steps)->map(fn ($label, $number) => [
        'step' => $number,
        'title' => $label,
        'status' => match (true) {
            $number < (int) $currentStep => 'completed',
            $number === (int) $currentStep => 'active',
            default => 'default',
        },
    ])->values()->all();
@endphp

<x-ui.section data-slot="checkout-03" space="md" {{ $attributes }}>
    <div class="mx-auto max-w-5xl px-4">
        <nav aria-label="{{ __('Checkout progress') }}" class="relative mb-10 overflow-x-auto">
            <x-ui.stepper
                orientation="horizontal"
                align="center"
                :steps="$progressSteps"
                class="mx-auto max-w-2xl"
            />
        </nav>

        <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
            <div class="lg:col-span-2">
                <x-ui.card>
                    <x-ui.card.header>
                        <x-ui.card.title>{{ __('Shipping information') }}</x-ui.card.title>
                        <x-ui.card.description>{{ __('Enter the address where your order should be delivered.') }}</x-ui.card.description>
                    </x-ui.card.header>
                    <x-ui.card.content>
                        <form method="POST" action="{{ $action }}" id="checkout-shipping-form" class="space-y-6">
                            @csrf
                            <x-ui.field>
                                <x-ui.label for="ship-name" required>{{ __('Full name') }}</x-ui.label>
                                <x-ui.input id="ship-name" name="shipping_name" type="text" autocomplete="name" required placeholder="Jane Smith" />
                            </x-ui.field>
                            <x-ui.field>
                                <x-ui.label for="ship-address" required>{{ __('Street address') }}</x-ui.label>
                                <x-ui.input id="ship-address" name="shipping_address" type="text" autocomplete="address-line1" required placeholder="123 Main Street" />
                            </x-ui.field>
                            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                                <x-ui.field>
                                    <x-ui.label for="ship-city" required>{{ __('City') }}</x-ui.label>
                                    <x-ui.input id="ship-city" name="shipping_city" type="text" autocomplete="address-level2" required placeholder="London" />
                                </x-ui.field>
                                <x-ui.field>
                                    <x-ui.label for="ship-postcode" required>{{ __('Postcode / ZIP') }}</x-ui.label>
                                    <x-ui.input id="ship-postcode" name="shipping_postcode" type="text" autocomplete="postal-code" required placeholder="SW1A 1AA" />
                                </x-ui.field>
                            </div>
                            <x-ui.field>
                                <x-ui.label for="ship-country" required>{{ __('Country') }}</x-ui.label>
                                <x-ui.input id="ship-country" name="shipping_country" type="text" autocomplete="country-name" required placeholder="United Kingdom" />
                            </x-ui.field>
                        </form>
                    </x-ui.card.content>
                    <x-ui.card.footer class="flex flex-col-reverse gap-4 sm:flex-row sm:justify-between">
                        <x-ui.button variant="ghost" type="button">
                            <svg class="me-2 size-4 shrink-0 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
                            {{ __('Back') }}
                        </x-ui.button>
                        <x-ui.button variant="default" type="submit" form="checkout-shipping-form" :with-arrow="true">{{ __('Continue to payment') }}</x-ui.button>
                    </x-ui.card.footer>
                </x-ui.card>
            </div>

            <aside class="lg:col-span-1">
                <div class="sticky top-6">
                    <x-ui.card>
                        <x-ui.card.header>
                            <x-ui.card.title>{{ __('Order summary') }}</x-ui.card.title>
                        </x-ui.card.header>
                        <x-ui.card.content>
                            <ul role="list" class="divide-y divide-border" aria-label="{{ __('Items in your order') }}">
                                @foreach ($items as $item)
                                    <li class="flex items-start gap-4 py-4 first:pt-0 last:pb-0">
                                        <div class="size-12 shrink-0 rounded-md border border-border bg-muted" aria-hidden="true"></div>
                                        <div class="min-w-0 flex-1">
                                            <p class="truncate text-sm font-medium text-foreground">{{ __($item['name']) }}</p>
                                            <p class="mt-0.5 text-xs text-muted-foreground">{{ __($item['variant']) }}</p>
                                            <div class="mt-2">
                                                <x-ui.badge variant="secondary" size="sm">{{ __('Qty') }} {{ $item['qty'] }}</x-ui.badge>
                                            </div>
                                        </div>
                                        <p class="shrink-0 text-sm font-medium text-foreground">{{ $currency }}{{ $item['price'] }}</p>
                                    </li>
                                @endforeach
                            </ul>
                            <x-ui.separator class="my-4" />
                            <dl class="space-y-2 text-sm">
                                <div class="flex justify-between">
                                    <dt class="text-muted-foreground">{{ __('Subtotal') }}</dt>
                                    <dd class="font-medium text-foreground">{{ $currency }}{{ $subtotal }}</dd>
                                </div>
                                <div class="flex justify-between">
                                    <dt class="text-muted-foreground">{{ __('Shipping') }}</dt>
                                    <dd class="font-medium text-foreground">{{ $currency }}{{ $shipping }}</dd>
                                </div>
                                <x-ui.separator class="my-2" />
                                <div class="flex justify-between">
                                    <dt class="text-base font-semibold text-foreground">{{ __('Total') }}</dt>
                                    <dd class="text-base font-bold text-foreground">{{ $currency }}{{ $total }}</dd>
                                </div>
                            </dl>
                        </x-ui.card.content>
                    </x-ui.card>
                </div>
            </aside>
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/checkout-stepper

Installs these dependencies automatically:

badge button card field input label section separator stepper

Registry contract

Install confidence

php artisan ui:add blocks/checkout-stepper 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.2
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/checkout-stepper.blade.php

Registry dependencies

badge button card field input label section separator stepper

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.

checkout-stepper.md

# Brok UI block: Checkout Stepper (`checkout-stepper`)

A multi-step checkout with a four-stage progress indicator above the current step's form beside a sticky order-summary card.

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/checkout-stepper
```

## Render it

```blade
<x-blocks.checkout-stepper />
```

## Props

- `action` (string, default `#`)
- `current-step` (int, default `2`)
- `currency` (string, default `$`)
- `items` (mixed|null, default `null`)
- `subtotal` (string, default `149.00`)
- `shipping` (string, default `8.00`)
- `total` (string, default `157.00`)

## Use when

- Checking a cart out across a four-stage stepper (e.g. cart, shipping, payment, review) with a progress indicator.
- Keeping the sticky order-summary card visible beside whichever step's form is active.

## Avoid when

- Use checkout-two-column for a single-page checkout form instead of a multi-step flow.

## Rules

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

Ask about Checkout Stepper 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

Checking a cart out across a four-stage stepper (e.g. cart, shipping, payment, review) with a progress indicator.
Keeping the sticky order-summary card visible beside whichever step's form is active.

Avoid when

Use checkout-two-column for a single-page checkout form instead of a multi-step flow.

Anti-patterns

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

Anatomy: root checkout-03

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.checkout-stepper />

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.