# Stack



> Stack component manages the vertical or horizontal layout of direct children using flexbox and adjustable spacing.

## Examples

### Default

```tsx
import { Stack } from "@kesko/components";

export default () => (
  <Stack direction="row" gap="sm" align="center">
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
  </Stack>
);

```

```html
<div class="k-stack k-stack-row k-stack-gap-sm k-stack-align-center">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>
```

### Column

```tsx
import { Button, Stack } from "@kesko/components";

export default () => (
  <Stack gap="sm">
    <Button variant="primary">Column, gap sm</Button>
    <Button variant="primary">Column, gap sm</Button>
    <Button variant="primary">Column, gap sm</Button>
  </Stack>
);

```

```html
<div class="k-stack k-stack-gap-sm">
  <button class="k-button k-button-primary">Column, gap sm</button>
  <button class="k-button k-button-primary">Column, gap sm</button>
  <button class="k-button k-button-primary">Column, gap sm</button>
</div>
```

### Row

```tsx
import { Button, Stack } from "@kesko/components";

export default () => (
  <Stack direction="row" gap="sm" align="center">
    <Button variant="primary">Row, gap sm</Button>
    <Button variant="primary">Row, gap sm</Button>
    <Button variant="primary">Row, gap sm</Button>
  </Stack>
);

```

```html
<div class="k-stack k-stack-row k-stack-gap-sm k-stack-align-center">
  <button class="k-button k-button-primary">Row, gap sm</button>
  <button class="k-button k-button-primary">Row, gap sm</button>
  <button class="k-button k-button-primary">Row, gap sm</button>
</div>
```


## Props

- `direction` — `"column" | "row"` (default: `"column"`) Layout direction. Defaults to "column".
- `gap` — `"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"` (default: `"md"`) Gap between children, mapped to the `--k-space- ` scale. Defaults to "md".
- `align` — `"start" | "center" | "end" | "stretch"` (default: `"start"`) Cross-axis alignment. Defaults to "start".
- `wrap` — `boolean` (default: `false`) Allow items to wrap to a new line when they overflow the container.

## CSS custom properties

- `--k-stack-gap` (default: `var(--k-space-md)`) Overrides the gap between children.