# Stack

Vertical and horizontal layout stacks with even spacing between items. Children can reveal in order, and adding or removing items smoothly moves the rest into place.

> Primitive · Free · Layout — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add stack
```

## Import

```tsx
import { VStack, HStack, Spacer, Box } from "@/components/ui/stack/stack";
```

## Variants

- `box` — Box: `npx @lumioui/cli add stack-box`
- `hstack` — Hstack: `npx @lumioui/cli add stack-hstack`
- `vstack` — Vstack: `npx @lumioui/cli add stack-vstack`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `gap?` | `number` | Gap between children in px (applied via style for reliability). |
| `align?` | `Align` | Cross-axis alignment. |
| `justify?` | `Justify` | Main-axis distribution. |
| `className?` | `string` | — |
| `reveal?` | `"bands" | "rows"` | Switch each direct child on as the stack mounts: children start dim (readable) with a 6px rise and brighten in order — "bands" on the 120ms page rhythm, "rows" on the 40ms list rhythm (capped at 300ms). Each child is wrapped in its own view, so `flex-1` children should carry their sizing on an outer element. Reduced motion keeps the brightening. |
| `animateLayout?` | `boolean` | Inserted children ignite in place, removed children dim out, and the siblings reflow on `spring.layout`. Children are wrapped like `reveal`. |

Source: https://lumioui.com/components/stack