Stack

Props API

import { Stack, StackProps, stackStyles } from '@christiankaindl/lyts'

Use Stack when you need consistent spacing between elements and/or a way to group elements together easily. Perfect to space passages of text, controls like links & buttons or page sections. Stack can be used both in large contexts (e.g. page sections) and small contexts (e.g. links in the footer).

Nesting stacks

Stacks can be nested within each other with different gaps, making it easy to visually group elements together:

// Edit the live code below
<Stack gap={2.5}>
  <Stack>
    <Box />
    <Box />
  </Stack>
  <Stack>
    <Box />
    <Box />
  </Stack>
</Stack>

Aligning children

By default Stack stretches its children to the full width (which is the CSS flexbox default), but this can be easily customized with the xAlign prop:

Note: xAlign and yAlign are convenience props. The same effect can be achieved using "align-items" (xAlign) and "justify-content" (yAlign)

Examples using Stack