# Stack

Lays out children in a vertical column.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Stack.tsx)

## Overview

Stack lays out children in a vertical column with a spacing token gap.

Use it for spacing between siblings instead of margins on the children.

## Examples

### Basic

```tsx
import { Stack } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Stack gap="3">
      <span>Card content</span>
      <span>Second line</span>
    </Stack>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Stack/Basic.tsx)

### Gap

Set `gap` to a spacing token. It defaults to `4`.

```tsx
import { Inline, Stack, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Inline align="start" gap="8" wrap>
      {(['1', '3', '6'] as const).map((gap) => (
        <Stack gap={gap} key={gap}>
          {[1, 2, 3].map((n) => (
            <span key={n} {...styles.chip()}>
              gap {gap}
            </span>
          ))}
        </Stack>
      ))}
    </Inline>
  )
}

namespace styles {
  export const chip = style({
    backgroundColor: 'grayAlpha.100',
    borderRadius: 'full',
    paddingBlock: '1',
    paddingInline: '3',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Stack/Gap.tsx)

### Align

Set `align` to `start`, `center`, `end`, or `stretch`. It defaults to `stretch`.

```tsx
import { Inline, Stack, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Inline align="start" gap="8" wrap>
      {(['start', 'center', 'end', 'stretch'] as const).map((align) => (
        <Stack align={align} gap="2" key={align} {...styles.column()}>
          <span {...styles.chip()}>{align}</span>
          <span {...styles.chip()}>Second line</span>
        </Stack>
      ))}
    </Inline>
  )
}

namespace styles {
  export const chip = style({
    backgroundColor: 'grayAlpha.100',
    borderRadius: 'full',
    paddingBlock: '1',
    paddingInline: '3',
  })

  export const column = style({ width: '10rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Stack/Align.tsx)

## Guidelines

TODO: Write guidelines for Stack.