Order Summary

Open source

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

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

@props([
    'orderNumber'       => 'ORD-28471',
    'carrier'           => 'FedEx',
    'trackingNumber'    => '7748 9002 3812 4561',
    'carrierHref'       => '#',
    'estimatedDelivery' => 'Wednesday, 18 Jun',
    'viewDetailsHref'   => '#',
    'currentStage'      => 3,
    'stages'            => null,
    'updates'           => null,
])

@php
    $stages ??= [
        ['label' => __('Ordered'), 'icon' => 'cart'],
        ['label' => __('Packed'), 'icon' => 'box'],
        ['label' => __('Shipped'), 'icon' => 'truck'],
        ['label' => __('Delivered'), 'icon' => 'check'],
    ];

    $updates ??= [
        ['status' => __('Out for delivery'), 'location' => __('San Francisco, CA'), 'timestamp' => __('Today, 7:42 AM')],
        ['status' => __('Arrived at local facility'), 'location' => __('South San Francisco, CA'), 'timestamp' => __('Yesterday, 11:18 PM')],
        ['status' => __('Departed sorting hub'), 'location' => __('Oakland, CA'), 'timestamp' => __('Yesterday, 6:05 PM')],
    ];

    $iconPaths = [
        'cart' => 'M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0',
        'box' => 'M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16ZM3.27 6.96 12 12.01l8.73-5.05M12 22.08V12',
        'truck' => 'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2M15 18H9m9 0h1.5a1.5 1.5 0 0 0 0-3M14 9h5l2 4M6 18a2 2 0 1 0 4 0 2 2 0 0 0-4 0m11 0a2 2 0 1 0 4 0 2 2 0 0 0-4 0',
        'check' => 'M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3',
    ];

    // Shipment progress as stepper steps: every stage before the current one is
    // completed (the primitive draws its check), the current one is active and
    // the rest wait. The icon paths above are block constants, so the inline
    // SVG is trusted markup.
    $progressSteps = collect($stages)->values()->map(fn ($stage, $i) => [
        'title' => $stage['label'],
        'status' => match (true) {
            $i + 1 < (int) $currentStage => 'completed',
            $i + 1 === (int) $currentStage => 'active',
            default => 'default',
        },
        'icon' => new \Illuminate\Support\HtmlString(
            '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="'
            .e($iconPaths[$stage['icon'] ?? 'check'] ?? $iconPaths['check'])
            .'" /></svg>'
        ),
    ])->all();
@endphp

<x-ui.section space="md" {{ $attributes }}>
    <x-ui.container size="sm" gutter="sm">
        <x-ui.card>
            <x-ui.card.header class="flex-row flex-wrap items-start justify-between gap-4 sm:flex-nowrap">
                <div class="flex flex-col gap-2">
                    <x-ui.card.title>{{ __('Order') }} #{{ $orderNumber }}</x-ui.card.title>
                    <p class="text-sm text-muted-foreground">{{ __('Estimated delivery:') }} <span class="font-medium text-foreground">{{ $estimatedDelivery }}</span></p>
                </div>
                <div class="flex shrink-0 flex-col items-end gap-2">
                    <x-ui.badge variant="success">{{ __('Out for delivery') }}</x-ui.badge>
                    <x-ui.button variant="ghost" size="sm" :href="$viewDetailsHref">{{ __('View details') }}</x-ui.button>
                </div>
            </x-ui.card.header>

            <x-ui.card.content class="space-y-8">
                <x-ui.stepper
                    orientation="horizontal"
                    align="center"
                    :steps="$progressSteps"
                    aria-label="{{ __('Shipment progress') }}"
                />

                <div>
                    <h2 class="mb-4 text-sm font-semibold tracking-wide text-foreground">{{ __('Latest updates') }}</h2>
                    <x-ui.timeline :alternating="false" :no-cards="true" :vert-item-spacing="24" aria-label="{{ __('Shipment scan events') }}">
                        @foreach ($updates as $j => $update)
                            <x-ui.timeline.item :variant="$j === 0 ? 'default' : 'secondary'">
                                <x-ui.timeline.title>{{ $update['status'] }}</x-ui.timeline.title>
                                <x-ui.timeline.description>{{ $update['location'] }}</x-ui.timeline.description>
                                <x-ui.timeline.date>{{ $update['timestamp'] }}</x-ui.timeline.date>
                            </x-ui.timeline.item>
                        @endforeach
                    </x-ui.timeline>
                </div>
            </x-ui.card.content>

            <x-ui.card.footer class="flex flex-col gap-4 border-t border-border pt-6 sm:flex-row sm:items-center sm:justify-between">
                <p class="flex flex-wrap items-center gap-x-6 gap-y-2 text-xs text-muted-foreground">
                    <span><span class="font-medium text-foreground">{{ __('Carrier:') }}</span> {{ $carrier }}</span>
                    <span><span class="font-medium text-foreground">{{ __('Tracking #:') }}</span> <span class="font-mono">{{ $trackingNumber }}</span></span>
                </p>
                <x-ui.button variant="outline" size="sm" :href="$carrierHref" class="shrink-0">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2 size-4" aria-hidden="true"><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
                    {{ __('Track on carrier site') }}
                </x-ui.button>
            </x-ui.card.footer>
        </x-ui.card>
    </x-ui.container>
</x-ui.section>

Installation

terminal

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

Installs these dependencies automatically:

badge button card container section stepper timeline

Registry contract

Install confidence

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

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

Registry dependencies

badge button card container section stepper timeline

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-tracking.md

# Brok UI block: Order Tracking (`order-summary-tracking`)

An order-tracking card with a four-stage shipment progress tracker, a latest-updates scan timeline and a carrier footer.

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-tracking
```

## Render it

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

## Props

- `order-number` (string, default `ORD-28471`) — Order number shown in the card header.
- `carrier` (string, default `FedEx`) — Shipping carrier name shown in the footer.
- `tracking-number` (string, default `7748 9002 3812 4561`) — Carrier tracking number shown in the footer.
- `carrier-href` (string, default `#`) — Destination for the track-on-carrier-site action.
- `estimated-delivery` (string, default `Wednesday, 18 Jun`) — Estimated delivery date shown beside the status badge.
- `view-details-href` (string, default `#`) — Destination for the view-details action.
- `current-stage` (int, default `3`) — 1-based index of the active stage in the shipment stepper.
- `stages` (mixed|null, default `null`) — Array of stepper stages ({label, icon}); null falls back to the default Ordered/Packed/Shipped/Delivered stages.
- `updates` (mixed|null, default `null`) — Array of scan-event timeline entries ({status, location, timestamp}); null falls back to sample updates.

## Use when

- Showing a single order's shipment progress with a four-stage stepper (ordered/packed/shipped/delivered).
- Giving a scan-event timeline of recent carrier updates plus a carrier/tracking-number footer for one order.

## Avoid when

- Showing a post-checkout order confirmation (order-summary-confirmation) or a printable receipt/invoice (order-summary-receipt).

## Rules

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

Ask about Order Tracking 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 single order's shipment progress with a four-stage stepper (ordered/packed/shipped/delivered).
Giving a scan-event timeline of recent carrier updates plus a carrier/tracking-number footer for one order.

Avoid when

Showing a post-checkout order confirmation (order-summary-confirmation) or a printable receipt/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: card header with status badge shipment stepper scan-event timeline carrier footer

Usage

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

resources/views/welcome.blade.php Blade

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

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.