Address Book

Open source

Account address book with a responsive grid of saved address cards, default and label badges, edit/delete actions, and an add-new placeholder.

Add to page builder

Responsive Dark mode RTL Localized SEO

resources/views/blocks/address-book.blade.php Blade

@props([
    'heading' => 'Addresses',
    'subheading' => 'Manage the shipping and billing addresses saved to your account.',
    'addresses' => null,
])

@php
    $addresses ??= [
        [
            'label' => 'Home',
            'name' => 'Avery Quinn',
            'lines' => ['1847 Maple Grove Lane', 'Apt 4', 'Portland, OR 97205', 'United States'],
            'phone' => '+1 (503) 555-0147',
            'default' => true,
        ],
        [
            'label' => 'Work',
            'name' => 'Avery Quinn — Acme Inc.',
            'lines' => ['600 Market Street', 'Floor 12', 'San Francisco, CA 94104', 'United States'],
            'phone' => '+1 (415) 555-0182',
            'default' => false,
        ],
        [
            'label' => 'Other',
            'name' => 'Jordan Rivera',
            'lines' => ['22 Harbour View Terrace', 'Brighton BN1 2RH', 'United Kingdom'],
            'phone' => '+44 1273 555 019',
            'default' => false,
        ],
    ];
@endphp

<x-ui.section
    aria-label="{{ __('Address book') }}"
    data-slot="address-book"
    space="lg" {{ $attributes }}
>
    <x-ui.container gutter="sm">
        <header class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <div class="max-w-2xl">
                <h2 class="text-balance text-2xl font-bold tracking-tight sm:text-3xl">{{ __($heading) }}</h2>
                <p class="mt-2 text-pretty text-muted-foreground">{{ __($subheading) }}</p>
            </div>

            <x-ui.button type="button" class="shrink-0 self-start sm:self-auto">
                <x-slot:icon>
                    <svg 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="M12 5v14M5 12h14" />
                    </svg>
                </x-slot:icon>
                {{ __('Add address') }}
            </x-ui.button>
        </header>

        <ul role="list" class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($addresses as $i => $address)
                <li>
                    <x-ui.card class="flex h-full flex-col p-6">
                        <div class="flex items-center justify-between gap-2">
                            <x-ui.badge variant="secondary">{{ __($address['label']) }}</x-ui.badge>
                            @if (!empty($address['default']))
                                <x-ui.badge variant="default">{{ __('Default') }}</x-ui.badge>
                            @endif
                        </div>

                        <address class="mt-4 not-italic">
                            <p class="font-semibold text-foreground">{{ $address['name'] }}</p>
                            <div class="mt-2 space-y-0.5 text-sm text-muted-foreground">
                                @foreach ($address['lines'] as $line)
                                    <p>{{ $line }}</p>
                                @endforeach
                            </div>

                            <p class="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
                                <svg class="size-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" />
                                </svg>
                                <a href="tel:{{ preg_replace('/[^+0-9]/', '', $address['phone']) }}" class="hover:text-foreground focus-visible:text-foreground focus-visible:outline-none">{{ $address['phone'] }}</a>
                            </p>
                        </address>

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

                        <div class="mt-auto flex items-center gap-2">
                            <x-ui.button variant="ghost" size="sm" type="button" aria-label="{{ __('Edit :label address', ['label' => $address['label']]) }}">
                                <x-slot:icon>
                                    <svg 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 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                                        <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z" />
                                    </svg>
                                </x-slot:icon>
                                {{ __('Edit') }}
                            </x-ui.button>

                            <form method="POST" action="#" class="contents">
                                @csrf
                                @method('DELETE')
                                <x-ui.button variant="ghost" size="sm" type="submit" class="text-destructive hover:text-destructive" aria-label="{{ __('Delete :label address', ['label' => $address['label']]) }}">
                                    <x-slot:icon>
                                        <svg 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="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                                        </svg>
                                    </x-slot:icon>
                                    {{ __('Delete') }}
                                </x-ui.button>
                            </form>
                        </div>
                    </x-ui.card>
                </li>
            @endforeach

            {{-- Add-new placeholder card --}}
            <li>
                <x-ui.card class="h-full border-2 border-dashed border-border bg-transparent p-6 shadow-none">
                    <a
                        href="#"
                        class="flex h-full min-h-44 flex-col items-center justify-center gap-4 rounded-md text-center text-muted-foreground transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:outline-none"
                    >
                        <span class="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
                            <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M12 5v14M5 12h14" />
                            </svg>
                        </span>
                        <span class="text-sm font-medium">{{ __('Add new address') }}</span>
                    </a>
                </x-ui.card>
            </li>
        </ul>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/address-book

Installs these dependencies automatically:

badge button card container section separator

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/address-book.blade.php

Registry dependencies

badge button card container 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.

address-book.md

# Brok UI block: Address Book (`address-book`)

Account address book with a responsive grid of saved address cards, default and label badges, edit/delete actions, and an add-new placeholder.

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/address-book
```

## Render it

```blade
<x-blocks.address-book />
```

## Props

- `heading` (string, default `Addresses`)
- `subheading` (string, default `Manage the shipping and billing addresses saved to your account.`)
- `addresses` (mixed|null, default `null`)

## Use when

- Listing a customer's saved shipping and billing addresses as a responsive grid of cards with default and label badges.
- Giving each address edit and delete actions plus an add-new placeholder card.

## Avoid when

- Use blocks/description-list-detail for general account key/value details; address-book is specifically for a collection of postal addresses.

## Rules

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

Ask about Address Book 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

Listing a customer's saved shipping and billing addresses as a responsive grid of cards with default and label badges.
Giving each address edit and delete actions plus an add-new placeholder card.

Avoid when

Use blocks/description-list-detail for general account key/value details; address-book is specifically for a collection of postal addresses.

Anti-patterns

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

Anatomy: root address-book

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.address-book />

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.