# Stack

A single-axis layout that wraps when the task calls for it.

- Family: Layout, imported from `mizu-ui` or `mizu-ui/layout`
- Docs: https://mizu.user64bit.world/components/stack
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/layout/Layout.tsx

## Usage

```tsx
import { Stack, Badge } from "mizu-ui";

export function Example() {
  return (
    <Stack direction="row" wrap gap={12}>
      <Badge>React</Badge>
      <Badge>TypeScript</Badge>
      <Badge>Native CSS</Badge>
    </Stack>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/stack 0xuser64bit/mizu/badge
```

## Props

- `direction`: `"row" | "column"` (default `"column"`). Main axis.
- `gap / align / wrap`: `number / CSS alignItems / boolean`. Spacing, cross-axis alignment and wrapping.
- `...props`: `HTMLAttributes`. Native div props; style can override defaults.

## Accessibility

No synthetic semantics. Use children with meaningful document structure.

## Motion

Native flex layout.