Stack

One-dimensional flex layout with direction, gap, and alignment.

import { Stack } from "@ps1ui/core";

Row

<Stack direction="row" gap="md">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</Stack>

<Stack direction="column" gap="sm">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</Stack>

<Stack direction={{ base: "column", md: "row" }} gap="md">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</Stack>

Prop	Type	Default	Description
`direction`	`"row" \| "column"`	`"column"`	Main-axis direction.
`gap`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	Gap between items on the space scale.
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	—	Cross-axis alignment (align-items).
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	—	Main-axis distribution (justify-content).
`wrap`	`boolean`	`false`	Wrap items onto multiple lines instead of overflowing.

All native <div> attributes are also accepted.