Group
Arrange elements and components within a horizontal flex container
Usage
Wrap children in <sa-group> to lay them out horizontally with a consistent gap.
<sa-group>...</sa-group>Examples
Gap
Control the horizontal gap between items with the gap attribute. You can specify a custom gap by adding a class from Tailwind's gap- utility.
Theme
<p>Extra small</p>
<sa-group gap="GroupGap.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-group>
<p>Small</p>
<sa-group gap="GroupGap.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-group>
<p>Default</p>
<sa-group 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-group>
<p>Large</p>
<sa-group gap="GroupGap.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-group>
<p>Extra large</p>
<sa-group gap="GroupGap.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-group>Justify
Control how items are positioned along a group's horizontal axis.
Theme
<p>Start</p>
<sa-group justify="GroupJustify.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 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-group>
<p>Center</p>
<sa-group justify="GroupJustify.Center" 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-group>
<p>End</p>
<sa-group justify="GroupJustify.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 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-group>
<p>Justify between</p>
<sa-group justify="GroupJustify.SpaceBetween"
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-group>
<p>Justify around</p>
<sa-group justify="GroupJustify.SpaceAround" 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-group>Align
Control how items are positioned along a group's vertical axis.
Theme
<p>Stretch</p>
<sa-group align="GroupAlign.Stretch" 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">01</div>
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground py-12">02</div>
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground py-8">03</div>
</sa-group>
<p>Start</p>
<sa-group align="GroupAlign.Start" 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">01</div>
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground py-12">02</div>
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground py-8">03</div>
</sa-group>
<p>Center</p>
<sa-group align="GroupAlign.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">01</div>
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground py-12">02</div>
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground py-8">03</div>
</sa-group>
<p>End</p>
<sa-group align="GroupAlign.End" 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">01</div>
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground py-12">02</div>
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground py-8">03</div>
</sa-group>
<p>Baseline</p>
<sa-group align="GroupAlign.Baseline" 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 pt-2 pb-6">01</div>
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground pt-8 pb-12">02</div>
<div class="flex flex-1 items-center justify-center rounded-lg bg-primary text-primary-foreground pt-12 pb-4">03</div>
</sa-group>API Reference
<sa-group>
Renders a <div> element laid out as a horizontal flex container.
Prop
Type