> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Column

`column` lays out children vertically. Use `spacing` in the style for consistent gaps between
children.

## Properties

| Property   | Accepted value     | Description                               |
| ---------- | ------------------ | ----------------------------------------- |
| `style`    | `StyleProperties`  | Layout, appearance, and transform values. |
| `children` | `ReactNode`        | Child nodes rendered vertically.          |
| `key`      | `string \| number` | React key for dynamic children.           |
| `class`    | `string`           | Registered style name for this node only. |

`column` has no node-specific properties.

On a column, `verticalAlignment` positions the child group along the column's height and
`horizontalAlignment` aligns each child across its width. `spacing` adds vertical gaps. See [How
layout alignment works](/js-ui/react/styling#how-layout-alignment-works).

## Example

```tsx theme={null}
<column style={{ padding: 16, spacing: 12 }}>
  <text style={{ fontSize: 22, fontWeight: 700 }}>
    Order summary
  </text>
  <text style={{ color: "#667085" }}>
    Review your items before checkout.
  </text>
  <button text="Continue" variant="primary" />
</column>
```

Use `weight` on a child when it should consume remaining space in the column.