blatui

Components

Page Header

A page title block with a description and optional breadcrumb and action slots.

php artisan blatui:add page-header

Dashboard

An overview of your account activity and recent metrics.

<x-ui.page-header
    title="Dashboard"
    description="An overview of your account activity and recent metrics."
/>

With Actions

Projects

Manage and organize all of your team's work in one place.

<x-ui.page-header
    title="Projects"
    description="Manage and organize all of your team's work in one place."
>
    <x-slot:actions>
        <x-ui.button variant="outline">Import</x-ui.button>
        <x-ui.button>New project</x-ui.button>
    </x-slot:actions>
</x-ui.page-header>

With Breadcrumb

Billing settings

Update your plan, payment method, and view past invoices.

<x-ui.page-header
    title="Billing settings"
    description="Update your plan, payment method, and view past invoices."
    :separator="true"
>
    <x-slot:breadcrumb>
        <x-ui.breadcrumb>
            <x-ui.breadcrumb-list>
                <x-ui.breadcrumb-item>
                    <x-ui.breadcrumb-link href="#">Home</x-ui.breadcrumb-link>
                </x-ui.breadcrumb-item>
                <x-ui.breadcrumb-separator />
                <x-ui.breadcrumb-item>
                    <x-ui.breadcrumb-link href="#">Settings</x-ui.breadcrumb-link>
                </x-ui.breadcrumb-item>
                <x-ui.breadcrumb-separator />
                <x-ui.breadcrumb-item>
                    <x-ui.breadcrumb-page>Billing</x-ui.breadcrumb-page>
                </x-ui.breadcrumb-item>
            </x-ui.breadcrumb-list>
        </x-ui.breadcrumb>
    </x-slot:breadcrumb>

    <x-slot:actions>
        <x-ui.button variant="outline">Cancel</x-ui.button>
        <x-ui.button>Save changes</x-ui.button>
    </x-slot:actions>
</x-ui.page-header>