Stack

Stack is a Flex with defaults for the most common case: children stacked top to bottom, 16px apart. It is the spacing between fields in a form.

import { Stack } from '@beyul/sulmu-ui'

Source

Examples

Vertical

Email

Password

Log In

import { Button, Field, Input, Stack } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack style={{ maxWidth: 360 }}>
      <Field label="Email">
        <Input placeholder="name@example.com" />
      </Field>
      <Field label="Password">
        <Input type="password" placeholder="Enter password" />
      </Field>
      <Button fullWidth>Log In</Button>
    </Stack>
  )
}

Row

direction="row" places the children side by side.

CancelInvite

import { Button, Stack } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack direction="row" gap={3} style={{ maxWidth: 360 }}>
      <Button variant="secondary" fullWidth>
        Cancel
      </Button>
      <Button fullWidth>Invite</Button>
    </Stack>
  )
}

Props

Prop	Type	Default	Description
direction	"row" | "column"	column	column stacks children top to bottom (default); row places them side by side.
as	ElementType	div	Element to render. Default: div.
align	"center" | "start" | "end" | "stretch" | "baseline"	-	Cross-axis alignment (align-items).
justify	"center" | "start" | "end" | "between" | "around" | "evenly"	-	Main-axis distribution (justify-content).
wrap	boolean	-	Let children wrap onto more lines.
gap	0 | 1 | 2 | 3 | 0.5 | 1.5 | 2.5 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 20 | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "12" | "14" | "16" | "20"	4	Space between children, as a step of the spacing scale: 1 = 4px, 4 = 16px.

Stack also accepts every div attribute.

Usage notes

• The default gap is 4 (16px). It takes the same steps as Flex.
• Stack only offers column and row. For reversed directions or inline-flex, use Flex.