Stack
Arrange elements and components within a vertical flex container
Usage
Wrap children in <sa-stack> to lay them out vertically with a consistent gap.
<sa-stack>...</sa-stack>Examples
Gap
Control the vertical gap between items with the gap attribute. You can specify a custom gap using Tailwind's gap- utility.
Theme
<p>Extra small</p>
<sa-stack gap="StackGap.ExtraSmall" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">03</div>
</sa-stack>
<p>Small</p>
<sa-stack gap="StackGap.Small" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">03</div>
</sa-stack>
<p>Default</p>
<sa-stack class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">03</div>
</sa-stack>
<p>Large</p>
<sa-stack gap="StackGap.Large" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">03</div>
</sa-stack>
<p>Extra large</p>
<sa-stack gap="StackGap.ExtraLarge" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">03</div>
</sa-stack>Justify
Control how items are positioned along a stack's vertical axis.
Theme
<p>Center</p>
<sa-stack justify="StackJustify.Center" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg h-[300px]">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">03</div>
</sa-stack>
<p>Start</p>
<sa-stack justify="StackJustify.Start" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg h-[300px]">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">03</div>
</sa-stack>
<p>End</p>
<sa-stack justify="StackJustify.End" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg h-[300px]">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">03</div>
</sa-stack>
<p>Space between</p>
<sa-stack justify="StackJustify.SpaceBetween" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg h-[300px]">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">03</div>
</sa-stack>
<p>Space around</p>
<sa-stack justify="StackJustify.SpaceAround" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg h-[300px]">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground p-4">03</div>
</sa-stack>Align
Control how items are positioned along a stack's horizontal axis.
Theme
<p>Stretch</p>
<sa-stack align="StackAlign.Stretch" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-12">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-6">03</div>
</sa-stack>
<p>Start</p>
<sa-stack align="StackAlign.Start" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-12">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-6">03</div>
</sa-stack>
<p>End</p>
<sa-stack align="StackAlign.End" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg">
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-12">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-6">03</div>
</sa-stack>
<p>Center</p>
<sa-stack align="StackAlign.Center" class="font-mono text-sm leading-6 font-bold bg-muted rounded-lg">
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-12">01</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-4">02</div>
<div class="flex items-center justify-center rounded-lg bg-primary text-primary-foreground py-4 px-6">03</div>
</sa-stack>API Reference
<sa-stack>
Renders a <div> element laid out as a vertical flex container.
Prop
Type