Order Summary

Open source

Order confirmation cards — a success state with line items, totals, shipping address and tracking actions.

1 of 3

resources/views/blocks/order-summary-confirmation.blade.php Blade

@props([
    'heading' => 'Order confirmed',
    'orderNumber' => 'ORD-10428',
    'currency' => '$',
    'items' => null,
    'subtotal' => '236.00',
    'shipping' => '12.00',
    'tax' => '19.84',
    'total' => '267.84',
    'shipName' => 'Jane Doe',
    'shipLines' => null,
    'estimatedDelivery' => 'Jun 18 – Jun 20',
    'trackHref' => '#',
    'continueHref' => '#',
])

{{--
    Order Summary — a centered order-confirmation card shown after checkout. A
    circular success-check chip anchors an "Order confirmed" heading and a muted
    line that echoes the order number. A card holds the purchased line items, a
    totals breakdown (subtotal / shipping / tax / total), a compact shipping
    address, and an estimated-delivery badge, followed by track + continue
    actions. Static confirmation: no network calls; all seeded data is echoed
    with {{ }} so any consumer-supplied value is auto-escaped.
--}}

@php
    $items ??= [
        [
            'name' => 'Aerolight Running Shoes',
            'qty' => 1,
            'price' => '128.00',
        ],
        [
            'name' => 'Merino Crew Socks (3-pack)',
            'qty' => 2,
            'price' => '54.00',
        ],
        [
            'name' => 'Performance Lace Kit',
            'qty' => 1,
            'price' => '54.00',
        ],
    ];

    $shipLines ??= [
        '123 Market Street, Suite 400',
        'San Francisco, CA 94103',
        'United States',
    ];
@endphp

<x-ui.section space="md" class="flex min-h-svh items-center justify-center px-4" {{ $attributes }}>
    <div class="w-full max-w-lg">
        <div class="flex flex-col items-center text-center">
            <span
                data-slot="order-summary-icon"
                data-animate="pop"
                aria-hidden="true"
                class="mb-4 flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary"
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.75"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="size-6"
                >
                    <path d="M20 6 9 17l-5-5" />
                </svg>
            </span>
            <h1 data-animate="rise" data-animate-order="1" class="text-2xl font-bold tracking-tight sm:text-3xl">{{ __($heading) }}</h1>
            <p data-animate="rise" data-animate-order="2" class="mt-2 text-pretty text-muted-foreground">
                {{ __('Thanks — your order') }}
                <span class="font-medium text-foreground">#{{ $orderNumber }}</span>
                {{ __('is on its way.') }}
            </p>
        </div>

        <x-ui.card data-animate="rise" data-animate-order="3" class="mt-8 p-6">
            <ul role="list" class="space-y-4">
                @foreach ($items as $item)
                    <li class="flex items-center gap-4">
                        <span
                            class="size-12 shrink-0 rounded-md bg-muted"
                            aria-hidden="true"
                        ></span>
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-sm font-medium text-foreground">{{ __($item['name']) }}</p>
                            <p class="text-sm text-muted-foreground">{{ __('Qty') }} {{ $item['qty'] }}</p>
                        </div>
                        <p class="shrink-0 text-sm font-medium text-foreground">{{ $currency }}{{ $item['price'] }}</p>
                    </li>
                @endforeach
            </ul>

            <x-ui.separator class="my-6" />

            <div class="space-y-4 text-sm">
                <div class="flex items-center justify-between">
                    <span class="text-muted-foreground">{{ __('Subtotal') }}</span>
                    <span class="font-medium text-foreground">{{ $currency }}{{ $subtotal }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-muted-foreground">{{ __('Shipping') }}</span>
                    <span class="font-medium text-foreground">{{ $currency }}{{ $shipping }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-muted-foreground">{{ __('Tax') }}</span>
                    <span class="font-medium text-foreground">{{ $currency }}{{ $tax }}</span>
                </div>

                <x-ui.separator class="my-2" />

                <div class="flex items-center justify-between text-base">
                    <span class="font-semibold text-foreground">{{ __('Total') }}</span>
                    <span class="font-semibold text-foreground">{{ $currency }}{{ $total }}</span>
                </div>
            </div>

            <x-ui.separator class="my-6" />

            <div class="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
                <div class="min-w-0">
                    <p class="text-sm font-medium uppercase tracking-wide text-muted-foreground">{{ __('Shipping to') }}</p>
                    <address class="mt-2 text-sm not-italic text-foreground">
                        <span class="block font-medium">{{ $shipName }}</span>
                        @foreach ($shipLines as $line)
                            <span class="block text-muted-foreground">{{ $line }}</span>
                        @endforeach
                    </address>
                </div>

                <div class="sm:text-end">
                    <p class="text-sm font-medium uppercase tracking-wide text-muted-foreground">{{ __('Estimated delivery') }}</p>
                    <div class="mt-2 flex sm:justify-end">
                        <x-ui.badge variant="secondary">{{ $estimatedDelivery }}</x-ui.badge>
                    </div>
                </div>
            </div>
        </x-ui.card>

        <div class="mt-6 flex flex-col gap-4 sm:flex-row">
            <x-ui.button :href="$trackHref" class="w-full sm:flex-1">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="size-4"
                    aria-hidden="true"
                >
                    <path d="M5 12h14" />
                    <path d="m12 5 7 7-7 7" />
                </svg>
                {{ __('Track order') }}
            </x-ui.button>
            <x-ui.button :href="$continueHref" variant="outline" class="w-full sm:flex-1">
                {{ __('Continue shopping') }}
            </x-ui.button>
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/order-summary-confirmation

Installs these dependencies automatically:

badge button card section separator

Registry contract

Install confidence

php artisan ui:add blocks/order-summary-confirmation 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.4
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/order-summary-confirmation.blade.php

Registry dependencies

badge button card section separator

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.

order-summary-confirmation.md

# Brok UI block: Order Summary (`order-summary-confirmation`)

A centered order-confirmation card with a success-check chip, line items, totals breakdown, shipping address, an estimated-delivery badge, and track/continue 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/order-summary-confirmation
```

## Render it

```blade
<x-blocks.order-summary-confirmation />
```

## Props

- `heading` (string, default `Order confirmed`) — Confirmation headline shown under the success icon.
- `order-number` (string, default `ORD-10428`) — Order number echoed under the heading.
- `currency` (string, default `$`) — Currency symbol prefixed to each price.
- `items` (mixed|null, default `null`) — Array of purchased line items ({name, qty, price}); null falls back to sample items.
- `subtotal` (string, default `236.00`) — Subtotal amount before shipping and tax.
- `shipping` (string, default `12.00`) — Shipping cost line in the totals breakdown.
- `tax` (string, default `19.84`) — Tax amount line in the totals breakdown.
- `total` (string, default `267.84`) — Grand total shown as the final totals line.
- `ship-name` (string, default `Jane Doe`) — Recipient name shown in the shipping address.
- `ship-lines` (mixed|null, default `null`) — Array of shipping address lines; null falls back to a sample address.
- `estimated-delivery` (string, default `Jun 18 – Jun 20`) — Estimated delivery date range shown in a badge.
- `track-href` (string, default `#`) — Destination for the track-order action.
- `continue-href` (string, default `#`) — Destination for the continue-shopping action.

## Use when

- Showing a centered post-checkout confirmation with a success icon, purchased line items and a subtotal/shipping/tax/total breakdown.
- Giving the customer a shipping address, estimated-delivery badge and track/continue actions right after an order completes.

## Avoid when

- Listing multiple past orders (order-history), showing shipment progress (order-summary-tracking), or producing a printable invoice (order-summary-receipt).

## Rules

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

Ask about Order Summary 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 centered post-checkout confirmation with a success icon, purchased line items and a subtotal/shipping/tax/total breakdown.
Giving the customer a shipping address, estimated-delivery badge and track/continue actions right after an order completes.

Avoid when

Listing multiple past orders (order-history), showing shipment progress (order-summary-tracking), or producing a printable invoice (order-summary-receipt).

Anti-patterns

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

Anatomy: section success-check icon heading line items totals breakdown shipping address estimated-delivery badge track/continue actions

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.order-summary-confirmation />

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.