primitives

Stack

Flex container with a gap that maps to the spacing scale.

Stack is a flex container whose gap resolves against the spacing scale (4px steps). The default direction is column; pair with Flex for row-by-default.

Try it live

import { Stack, Box, Text } from "@plyxui/primitives";

export default function App() {
return (
  <Box padding="lg" style={{ minHeight: "100vh" }}>
    <Text size="sm" weight="semibold" style={{ marginBottom: 12 }}>direction=vertical, gap=3</Text>
    <Stack direction="vertical" gap={3} style={{ marginBottom: 32 }}>
      <Box surface="raised" padding="md" radius="md"><Text>One</Text></Box>
      <Box surface="raised" padding="md" radius="md"><Text>Two</Text></Box>
      <Box surface="raised" padding="md" radius="md"><Text>Three</Text></Box>
    </Stack>
    <Text size="sm" weight="semibold" style={{ marginBottom: 12 }}>direction=horizontal, justify=between</Text>
    <Stack direction="horizontal" gap={2} justify="between">
      <Box surface="raised" padding="md" radius="md"><Text>Left</Text></Box>
      <Box surface="raised" padding="md" radius="md"><Text>Mid</Text></Box>
      <Box surface="raised" padding="md" radius="md"><Text>Right</Text></Box>
    </Stack>
  </Box>
);
}

Open Sandbox

API

<Stack gap={4}>
  <Box>One</Box>
  <Box>Two</Box>
  <Box>Three</Box>
</Stack>

<Stack direction="row" gap={2} align="center" justify="between">
  <Text size="lg" weight="bold">Title</Text>
  <Button>Action</Button>
</Stack>

Props

Prop	Type	Default
`direction`	`"row" \| "column" \| "row-reverse" \| "column-reverse"`	`"column"`
`gap`	spacing key (`0`, `0.5`, `1`, `1.5`, `2`, `3`, `4`, `5`, `6`, `8`, `10`, `12`, `16`, `20`, `24`)	`0`
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	-
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	-
`wrap`	`boolean`	`false`
`inline`	`boolean` (web only — renders `inline-flex`)	`false`

Spacing scale

Token	px
`0`	0
`0.5`	2
`1`	4
`1.5`	6
`2`	8
`3`	12
`4`	16
`5`	20
`6`	24
`8`	32
`10`	40
`12`	48
`16`	64
`20`	80
`24`	96

Native

React Native 0.71+ supports gap natively, so the native variant uses it directly. No extra divider hack needed.