Stack

A column whose spacing comes from the theme.

import { Stack } from '@textui/core';

<Stack spacing="md">
  <text content="one" />
  <text content="two" />
</Stack>

Props

| Prop | Type | Default | | | — | — | — | — | | spacing | 'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | | Space between children, from the theme’s scale. |

Plus everything on BoxProps.

Stack is Column with gap taken from the theme’s spacing scale rather than from a number: 'none', 'xs', 'sm', 'md', 'lg', 'xl'.

Use it wherever the gap is “the usual one”, so that changing the theme’s rhythm changes the screen. Use Column with an explicit gap where the number is load-bearing and must not move.

See also

  • Column - an explicit gap
  • Themes - what the spacing scale resolves to

Back to top

MIT licensed. Pre-1.0 - the surface is still moving.