Components

Stack

A flexbox layout primitive for vertical or horizontal stacking with gap and alignment.

php artisan blatui:add stack

First

Second

Third

<x-ui.stack>
    <div class="rounded-md border bg-card p-4 text-sm text-card-foreground">First</div>
    <div class="rounded-md border bg-card p-4 text-sm text-card-foreground">Second</div>
    <div class="rounded-md border bg-card p-4 text-sm text-card-foreground">Third</div>
</x-ui.stack>

Aligned

Project status

Active

<x-ui.stack direction="row" justify="between" align="center" class="rounded-lg border p-4">
    <div class="text-sm font-medium">Project status</div>
    <x-ui.badge>Active</x-ui.badge>
</x-ui.stack>

Horizontal

One

Two

Three

<x-ui.stack direction="row" gap="3">
    <div class="rounded-md border bg-card p-4 text-sm text-card-foreground">One</div>
    <div class="rounded-md border bg-card p-4 text-sm text-card-foreground">Two</div>
    <div class="rounded-md border bg-card p-4 text-sm text-card-foreground">Three</div>
</x-ui.stack>