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>

API Reference

Props, slots and exposed methods for <x-ui.stack>.

Props

Prop	Type	Default	Description
`direction`	`string`	`'col'`	Flex direction: stack children vertically (col) or horizontally (row). `col` `row`
`gap`	`string\|int`	`'4'`	Space between children, mapped to a Tailwind gap utility (in 0.25rem units). `0` `1` `2` `3` `4` `5` `6` `8` `10` `12`
`align`	`string`	—	Cross-axis alignment of children (align-items). `start` `center` `end` `stretch` `baseline`
`justify`	`string`	—	Main-axis distribution of children (justify-content). `start` `center` `end` `between` `around` `evenly`
`wrap`	`bool`	`false`	Allow children to wrap onto multiple lines (flex-wrap).

Slots

Slot	Description
`default`	The items to lay out as a flex stack.