blatui

Components

Stepper

Guides users through a multi-step flow — horizontal or vertical, with completed-step checks.

php artisan blatui:add stepper 
{{-- Numbered steps with Previous / Next controls. Completed steps show a check. --}}
<x-ui.stepper :value="1" class="w-full max-w-xl">
    <x-ui.stepper-nav>
        <x-ui.stepper-item :step="1">
            <x-ui.stepper-trigger>
                <x-ui.stepper-indicator />
            </x-ui.stepper-trigger>
            <x-ui.stepper-separator />
        </x-ui.stepper-item>
        <x-ui.stepper-item :step="2">
            <x-ui.stepper-trigger>
                <x-ui.stepper-indicator />
            </x-ui.stepper-trigger>
            <x-ui.stepper-separator />
        </x-ui.stepper-item>
        <x-ui.stepper-item :step="3">
            <x-ui.stepper-trigger>
                <x-ui.stepper-indicator />
            </x-ui.stepper-trigger>
        </x-ui.stepper-item>
    </x-ui.stepper-nav>

    <div class="text-muted-foreground flex h-32 items-center justify-center rounded-md border text-sm">
        <span x-text="`Step ${step} of 3`"></span>
    </div>

    <div class="flex justify-between">
        <x-ui.button variant="outline" x-bind:disabled="step === 1" x-on:click="step = Math.max(1, step - 1)">Previous</x-ui.button>
        <x-ui.button x-bind:disabled="step === 3" x-on:click="step = Math.min(3, step + 1)">Next</x-ui.button>
    </div>
</x-ui.stepper>

Vertical

{{-- Vertical orientation: indicators stacked with a growing rail between them. --}}
<x-ui.stepper :value="2" orientation="vertical" class="w-full max-w-md">
    <x-ui.stepper-nav>
        <x-ui.stepper-item :step="1">
            <x-ui.stepper-trigger class="items-start">
                <span class="flex flex-col items-center self-stretch">
                    <x-ui.stepper-indicator />
                    <x-ui.stepper-separator />
                </span>
                <span class="flex flex-col gap-0.5 pt-1.5 pb-6">
                    <x-ui.stepper-title>Account</x-ui.stepper-title>
                    <x-ui.stepper-description>Create your account</x-ui.stepper-description>
                </span>
            </x-ui.stepper-trigger>
        </x-ui.stepper-item>
        <x-ui.stepper-item :step="2">
            <x-ui.stepper-trigger class="items-start">
                <span class="flex flex-col items-center self-stretch">
                    <x-ui.stepper-indicator />
                    <x-ui.stepper-separator />
                </span>
                <span class="flex flex-col gap-0.5 pt-1.5 pb-6">
                    <x-ui.stepper-title>Profile</x-ui.stepper-title>
                    <x-ui.stepper-description>Set up your profile</x-ui.stepper-description>
                </span>
            </x-ui.stepper-trigger>
        </x-ui.stepper-item>
        <x-ui.stepper-item :step="3">
            <x-ui.stepper-trigger class="items-start">
                <span class="flex flex-col items-center self-stretch">
                    <x-ui.stepper-indicator />
                </span>
                <span class="flex flex-col gap-0.5 pt-1.5">
                    <x-ui.stepper-title>Complete</x-ui.stepper-title>
                    <x-ui.stepper-description>Finish the setup</x-ui.stepper-description>
                </span>
            </x-ui.stepper-trigger>
        </x-ui.stepper-item>
    </x-ui.stepper-nav>
</x-ui.stepper>

With Description

{{-- Title plus a secondary description per step. --}}
<x-ui.stepper :value="2" class="w-full max-w-3xl">
    <x-ui.stepper-nav>
        <x-ui.stepper-item :step="1">
            <x-ui.stepper-trigger>
                <x-ui.stepper-indicator />
                <span class="flex flex-col gap-0.5">
                    <x-ui.stepper-title>Account</x-ui.stepper-title>
                    <x-ui.stepper-description>Create an account</x-ui.stepper-description>
                </span>
            </x-ui.stepper-trigger>
            <x-ui.stepper-separator />
        </x-ui.stepper-item>
        <x-ui.stepper-item :step="2">
            <x-ui.stepper-trigger>
                <x-ui.stepper-indicator />
                <span class="flex flex-col gap-0.5">
                    <x-ui.stepper-title>Profile</x-ui.stepper-title>
                    <x-ui.stepper-description>Set up your profile</x-ui.stepper-description>
                </span>
            </x-ui.stepper-trigger>
            <x-ui.stepper-separator />
        </x-ui.stepper-item>
        <x-ui.stepper-item :step="3">
            <x-ui.stepper-trigger>
                <x-ui.stepper-indicator />
                <span class="flex flex-col gap-0.5">
                    <x-ui.stepper-title>Complete</x-ui.stepper-title>
                    <x-ui.stepper-description>Finish the setup</x-ui.stepper-description>
                </span>
            </x-ui.stepper-trigger>
        </x-ui.stepper-item>
    </x-ui.stepper-nav>
</x-ui.stepper>

With Labels

{{-- Each indicator paired with a short label. --}}
<x-ui.stepper :value="2" class="w-full max-w-2xl">
    <x-ui.stepper-nav>
        <x-ui.stepper-item :step="1">
            <x-ui.stepper-trigger>
                <x-ui.stepper-indicator />
                <x-ui.stepper-title>Details</x-ui.stepper-title>
            </x-ui.stepper-trigger>
            <x-ui.stepper-separator />
        </x-ui.stepper-item>
        <x-ui.stepper-item :step="2">
            <x-ui.stepper-trigger>
                <x-ui.stepper-indicator />
                <x-ui.stepper-title>Confirm</x-ui.stepper-title>
            </x-ui.stepper-trigger>
            <x-ui.stepper-separator />
        </x-ui.stepper-item>
        <x-ui.stepper-item :step="3">
            <x-ui.stepper-trigger>
                <x-ui.stepper-indicator />
                <x-ui.stepper-title>Done</x-ui.stepper-title>
            </x-ui.stepper-trigger>
        </x-ui.stepper-item>
    </x-ui.stepper-nav>
</x-ui.stepper>