# Stack > Lays children out in a column or row with a consistent gap — the default way to space a group of elements. URL: https://apogee.avaui.dev/docs/stack Last updated: 2026-10-15 Lays children out in a column or row with a consistent gap — the default way to space a group of elements. Last updated October 15, 2026 ```astro
One
Two
Three
 ``` ## Add ```sh npx @ava-ui/apogee add stack ``` No Apogee component dependencies. ## Usage ```astro --- import Stack from '@/components/apogee/Stack/Stack.astro' ---

First

Second

 ``` ## API `@composable` — exposed to Content Editors in AVA. Any other attribute passes through onto the rendered tag. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `as` | `string` | `'div'` | Element/tag to render. | | `direction` | `'column' \| 'row' \| 'column-reverse' \| 'row-reverse'`, responsive | `'column'` | Stack axis. | | `gap` | `0 … 6 \| 8 \| 10 \| 12 \| 16`, responsive | `4` | Gap between children (Tailwind’s numeric spacing scale). | | `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`, responsive | — | Cross-axis alignment (`items-*`). | | `justify` | `'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'`, responsive | — | Main-axis distribution (`justify-*`). | | `wrap` | `boolean`, responsive | — | Allows children to wrap (`flex-wrap`). | | `class` | `string` | — | Extra classes, merged last. | ## Responsive values Every layout prop accepts a value or an object keyed by breakpoint (`T | { base?, sm?, md?, lg?, xl? }`, mobile first, Tailwind’s `sm` 640px, `md` 768px, `lg` 1024px, `xl` 1280px). Resize the window to see the direction flip: ```astro
One
Two
Three
 ``` ## Variants ### Direction ```astro
A
B
A
B
 ``` ### Gap Every value on the scale: ```astro gap=0
 gap=1
 gap=2
 gap=3
 gap=4
 gap=5
 gap=6
 gap=8
 gap=10
 gap=12
 ``` ### Align ```astro
start
center
end
stretch
 ``` ### Justify ```astro
start
center
end
A
B
 ``` ### Wrap ```astro
One
Two
Three
Four
 ``` ## States Not applicable — Stack is a static layout primitive with no interactive states. ## Examples Polymorphic tag for correct semantics: ```astro
  • First
  • Second
  • Third
    •  ``` Nested Stacks — a vertical form with a right-aligned button row: ```astro ``` ## Accessibility Native semantics, no extra ARIA needed. Stack renders a plain container (`
    ` by default, or your chosen `as` tag) with no interactive behavior of its own — pick an `as` value with the right semantics for your content (`ul`, `nav`, `section`, …); Stack adds none. ## Tokens Stack reads no Apogee design tokens directly — `gap` maps to Tailwind’s built-in numeric spacing scale (`gap-0`…`gap-12`), not a themeable custom property. ## Do / Don’t Layout primitive — no content or misuse surface beyond picking the right props; the usual Do/Don’t guidance doesn’t apply. ## Content Not applicable — Stack renders no text of its own. ## Related [ BoxThe layout primitive. Direction, gap, padding, surface, border, radius and shadow as token props. ](https://apogee.avaui.dev/docs/box)[ GridA responsive grid — autofit by default, or a fixed column count. ](https://apogee.avaui.dev/docs/grid)[ ContainerCenters content at a max width with fluid side gutters. ](https://apogee.avaui.dev/docs/container)