Settings

Open source

Account settings screens — a grouped account form, a notification-preferences matrix and a connected-apps integrations list.

Add to page builder

4 of 6

resources/views/blocks/settings-billing.blade.php Blade

{{--
    Settings Billing — a current-plan card with a usage meter, a payment-method
    row, and a billing-history invoice table.

    Opt-in slots (every default renders exactly as before when a slot is empty):
    - banner:          between the heading and the plan card (a failed-payment
                       alert, a trial notice).
    - usage:           replaces the built-in usage bar inside the plan card.
    - plan-actions:    replaces the Upgrade / Cancel plan row.
    - payment-actions: replaces the Edit button beside the card on file.
    - after:           after the invoice table (billing details, seats, tax).
    An invoice row may carry `pdfHref`; when set a second "PDF" link renders
    beside the download link.
--}}
@props([
    'heading'       => 'Billing',
    'subheading'    => 'Manage your subscription, payment method, and invoices.',
    'plan'          => null,
    'paymentMethod' => null,
    'invoices'      => null,
    'headingTag'    => 'h2',
    'upgradeHref'   => '#',
    'cancelHref'    => '#',
    'paymentHref'   => '#',
    'banner'         => null,
    'usage'          => null,
    'planActions'    => null,
    'paymentActions' => null,
    'after'          => null,
])

@php
    $plan ??= [
        'name' => 'Pro', 'price' => '$29', 'period' => __('/ month'),
        'features' => __('Unlimited projects, Priority support, Advanced analytics'),
        'usageLabel' => __('Credits used'), 'usageUsed' => 8000, 'usageTotal' => 10000,
    ];
    $paymentMethod ??= ['last4' => '4242', 'expiry' => '08 / 26'];
    $invoices ??= [
        ['date' => '1 Jun 2026', 'amount' => '$29.00', 'status' => 'paid', 'href' => '#'],
        ['date' => '1 May 2026', 'amount' => '$29.00', 'status' => 'paid', 'href' => '#'],
        ['date' => '1 Apr 2026', 'amount' => '$29.00', 'status' => 'pending', 'href' => '#'],
        ['date' => '1 Mar 2026', 'amount' => '$29.00', 'status' => 'paid', 'href' => '#'],
    ];

    $usagePct = $plan['usageTotal'] > 0 ? min(100, (int) round($plan['usageUsed'] / $plan['usageTotal'] * 100)) : 0;
    $usageFormatted = number_format($plan['usageUsed']).' / '.number_format($plan['usageTotal']);
    $statusVariants = ['paid' => 'success', 'pending' => 'warning', 'failed' => 'destructive'];

    $filled = fn ($slot) => $slot instanceof \Illuminate\View\ComponentSlot ? ! $slot->isEmpty() : filled($slot);
@endphp

<x-ui.section space="md" {{ $attributes }}>
    <div class="mx-auto max-w-3xl space-y-6 px-4">
        <div>
            <{{ $headingTag }} class="text-2xl font-bold tracking-tight">{{ __($heading) }}</{{ $headingTag }}>
            <p class="mt-2 text-sm text-muted-foreground">{{ __($subheading) }}</p>
        </div>

        @if ($filled($banner))
            {{ $banner }}
        @endif

        <x-ui.card>
            <x-ui.card.header>
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <x-ui.card.title>{{ __('Current plan') }}</x-ui.card.title>
                    <x-ui.badge variant="success">{{ __('Current') }}</x-ui.badge>
                </div>
                <x-ui.card.description>{{ __('Your active subscription and usage.') }}</x-ui.card.description>
            </x-ui.card.header>
            <x-ui.card.content class="space-y-6">
                <div class="flex flex-wrap items-baseline gap-x-2 gap-y-2">
                    <span class="text-2xl font-semibold">{{ $plan['name'] }}</span>
                    <span class="text-3xl font-bold">{{ $plan['price'] }}</span>
                    <span class="text-sm text-muted-foreground">{{ $plan['period'] }}</span>
                </div>
                <p class="text-sm text-muted-foreground">{{ $plan['features'] }}</p>

                @if ($filled($usage))
                    {{ $usage }}
                @else
                    <div class="space-y-2">
                        <div class="flex items-center justify-between text-sm">
                            <span class="font-medium">{{ $plan['usageLabel'] }}</span>
                            <span class="tabular-nums text-muted-foreground">{{ $usageFormatted }} {{ __('credits') }}</span>
                        </div>
                        <x-ui.progress :value="$plan['usageUsed']" :max="$plan['usageTotal']" :label="$plan['usageLabel']" />
                        <p class="text-sm text-muted-foreground">{{ $usagePct }}% {{ __('of monthly credits used') }}</p>
                    </div>
                @endif

                @if ($filled($planActions))
                    {{ $planActions }}
                @else
                    <div class="flex flex-wrap items-center gap-4 pt-2">
                        <x-ui.button :href="$upgradeHref" variant="default">{{ __('Upgrade') }}</x-ui.button>
                        <x-ui.button :href="$cancelHref" variant="ghost">{{ __('Cancel plan') }}</x-ui.button>
                    </div>
                @endif
            </x-ui.card.content>
        </x-ui.card>

        <x-ui.card>
            <x-ui.card.header>
                <x-ui.card.title>{{ __('Payment method') }}</x-ui.card.title>
                <x-ui.card.description>{{ __('The card charged each billing cycle.') }}</x-ui.card.description>
            </x-ui.card.header>
            <x-ui.card.content>
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="flex items-center gap-4">
                        <span class="flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground" aria-hidden="true">
                            <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">
                                <rect x="2" y="5" width="20" height="14" rx="2" /><path d="M2 10h20" />
                            </svg>
                        </span>
                        <div class="space-y-0.5">
                            <p class="text-sm font-medium">{{ __('Card ending in') }} <span class="tracking-widest">•••• {{ $paymentMethod['last4'] }}</span></p>
                            <p class="text-sm text-muted-foreground">{{ __('Expires') }} {{ $paymentMethod['expiry'] }}</p>
                        </div>
                    </div>
                    @if ($filled($paymentActions))
                        {{ $paymentActions }}
                    @else
                        <x-ui.button :href="$paymentHref" variant="ghost" size="sm">{{ __('Edit') }}</x-ui.button>
                    @endif
                </div>
            </x-ui.card.content>
        </x-ui.card>

        <x-ui.card>
            <x-ui.card.header>
                <x-ui.card.title>{{ __('Billing history') }}</x-ui.card.title>
                <x-ui.card.description>{{ __('Download past invoices for your records.') }}</x-ui.card.description>
            </x-ui.card.header>
            <x-ui.card.content class="overflow-x-auto !p-0">
                <table class="w-full text-sm" aria-label="{{ __('Invoice history') }}">
                    <thead>
                        <tr class="border-b border-border">
                            <th class="px-4 py-4 text-start font-medium text-muted-foreground sm:px-6">{{ __('Date') }}</th>
                            <th class="px-4 py-4 text-start font-medium text-muted-foreground sm:px-6">{{ __('Amount') }}</th>
                            <th class="px-4 py-4 text-start font-medium text-muted-foreground sm:px-6">{{ __('Status') }}</th>
                            <th class="px-4 py-4 text-end font-medium text-muted-foreground sm:px-6"><span class="sr-only">{{ __('Download') }}</span></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border">
                        @foreach ($invoices as $invoice)
                            <tr>
                                <td class="px-4 py-4 text-start tabular-nums text-foreground sm:px-6">{{ $invoice['date'] }}</td>
                                <td class="px-4 py-4 text-start font-medium tabular-nums text-foreground sm:px-6">{{ $invoice['amount'] }}</td>
                                <td class="px-4 py-4 text-start sm:px-6">
                                    <x-ui.badge :variant="$statusVariants[$invoice['status']] ?? 'secondary'" size="sm">{{ __(ucfirst($invoice['status'])) }}</x-ui.badge>
                                </td>
                                <td class="px-4 py-4 text-end sm:px-6">
                                    <span class="inline-flex items-center justify-end gap-4">
                                        <a href="{{ $invoice['href'] }}" class="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="{{ __('Download invoice for') }} {{ $invoice['date'] }}">
                                            <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
                                            </svg>
                                            <span class="hidden sm:inline">{{ __('Download') }}</span>
                                        </a>
                                        @if (filled($invoice['pdfHref'] ?? null))
                                            <a href="{{ $invoice['pdfHref'] }}" class="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="{{ __('Open PDF invoice for') }} {{ $invoice['date'] }}">
                                                <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" />
                                                </svg>
                                                {{ __('PDF') }}
                                            </a>
                                        @endif
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </x-ui.card.content>
        </x-ui.card>

        @if ($filled($after))
            {{ $after }}
        @endif
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/settings-billing

Installs these dependencies automatically:

badge button card section progress

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/settings-billing.blade.php

Registry dependencies

badge button card section progress

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.

settings-billing.md

# Brok UI block: Settings Billing (`settings-billing`)

A billing settings screen — a current-plan card with a usage meter, a payment-method row, and a billing-history invoice table.

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/settings-billing
```

## Render it

```blade
<x-blocks.settings-billing />
```

## Props

- `heading` (string, default `Billing`) — Screen heading, rendered in `headingTag`.
- `subheading` (string, default `Manage your subscription, payment method, and invoices.`) — Muted line under the heading.
- `plan` (array, default `null`) — ['name','price','period','features','usageLabel','usageUsed','usageTotal']; drives the plan card and the built-in usage bar.
- `payment-method` (array, default `null`) — ['last4','expiry'] for the card on file.
- `invoices` (array, default `null`) — [['date','amount','status' => paid|pending|failed,'href','pdfHref' => null]]; `pdfHref` adds a PDF link beside the download link.
- `heading-tag` (h1|h2|h3, default `h2`) — Heading level so the block fits under a page title.
- `upgrade-href` (string, default `#`) — Upgrade button target.
- `cancel-href` (string, default `#`) — Cancel plan button target.
- `payment-href` (string, default `#`) — Edit payment method target.

## Use when

- A settings area needs one screen for the current plan, the card on file and past invoices.
- A paid billing block composes this one and fills its slots with proration, seats, tax fields or a recovery banner.

## Avoid when

- A public pricing table — use a `pricing-*` block.
- A checkout — use `checkout-subscription`.

## Rules

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

Ask about Settings Billing 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

A settings area needs one screen for the current plan, the card on file and past invoices.
A paid billing block composes this one and fills its slots with proration, seats, tax fields or a recovery banner.

Avoid when

A public pricing table — use a `pricing-*` block.
A checkout — use `checkout-subscription`.

Anti-patterns

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

Anatomy: settings-billing
Theming hooks: settings-billing

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.settings-billing />

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.