# Stack

> Arranges children in a vertical or horizontal flow with consistent, token-based spacing.

Category: Layout · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/stack

Stack is the default way to space things apart. It owns the gap between children, so the children never need margins. Use `direction="row"` for horizontal groups, or `rowFrom` to switch from a column to a row at a breakpoint. For wrapping horizontal groups such as tags, use Inline.

## Import

```tsx
import { Stack } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import type { ReactNode } from 'react';
import { Stack } from '@bindshq/stance-react';

const Tile = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      padding: '12px 16px',
      border: '1px dashed var(--st-color-border-strong)',
      borderRadius: 8,
      fontSize: 14,
    }}
  >
    {children}
  </div>
);

export function Basic() {
  return (
    <Stack gap={3} style={{ width: '100%', maxWidth: 360 }}>
      <Tile>Choose a template</Tile>
      <Tile>Customise details</Tile>
      <Tile>Assign to users</Tile>
    </Stack>
  );
}
```

### Column to row

Stacks on phones and becomes a row from 768px.

```tsx
import type { ReactNode } from 'react';
import { Stack } from '@bindshq/stance-react';

const Tile = ({ children }: { children: ReactNode }) => (
  <div
    style={{
      padding: '12px 16px',
      border: '1px dashed var(--st-color-border-strong)',
      borderRadius: 8,
      fontSize: 14,
    }}
  >
    {children}
  </div>
);

export function Responsive() {
  return (
    <Stack gap={4} rowFrom="md" style={{ width: '100%' }}>
      <Tile>Templates: 24</Tile>
      <Tile>Active users: 318</Tile>
      <Tile>Pending deployments: 3</Tile>
    </Stack>
  );
}
```

### Alignment

```tsx
import { Button, Stack, Text } from '@bindshq/stance-react';

export function Alignment() {
  return (
    <Stack direction="row" justify="between" align="center" style={{ width: '100%' }}>
      <Text size="sm" weight="semibold">
        Organisation users
      </Text>
      <Button size="sm">Invite user</Button>
    </Stack>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Stack | `as` | `keyof JSX.IntrinsicElements` | `'div'` | Element to render, e.g. ul or form. |
| Stack | `gap` | `SpaceKey` | `4` | Gap between children. |
| Stack | `direction` | `'column' \| 'row'` | `'column'` | Flow direction. |
| Stack | `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | `'stretch'` | Cross-axis alignment. |
| Stack | `justify` | `'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'` | `'start'` | Main-axis distribution. |
| Stack | `wrap` | `boolean` | `false` | Allow wrapping in row direction. |
| Stack | `rowFrom` | `'sm' \| 'md' \| 'lg'` | None | Switch to a row from this breakpoint upwards. |

## Accessibility

- Stack only changes visual layout. DOM order, and therefore reading and focus order, is unchanged.
- Render lists as lists: use `as="ul"` with `li` children when the items form a list.

## Guidelines

**Do**

- Let Stack own spacing; remove margins from children.
- Nest stacks with smaller gaps for grouped content.

**Don’t**

- Reorder content visually with CSS order; keep DOM order meaningful.

## Related

- https://stanceui.com/components/inline
- https://stanceui.com/components/grid
- https://stanceui.com/components/spacer