Stack

Vertical layout primitive dengan gap konsisten. Bisa dipakai horizontal via prop direction='row'.

import { Stack } from "@naraya/ui";

Vertical (default)

Item 1

Item 2

Item 3

<Stack gap="3">
  <Card>...</Card>
  <Card>...</Card>
</Stack>

Different gaps

gap="1"

gap="3"

gap="6"

gap="10"

<Stack gap="1">...</Stack>
<Stack gap="3">...</Stack>
<Stack gap="6">...</Stack>
<Stack gap="10">...</Stack>

Row direction

<Stack direction="row" gap="3">
  <Button>Save</Button>
  <Button variant="outline">Cancel</Button>
</Stack>

Align & justify

Top

Middle

Bottom

<Stack align="center" justify="between">
  ...
</Stack>

Prop	Type	Default	Description
direction	`"column" \| "row"`	`"column"`	Arah layout.
gap	`"0" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "8" \| "10" \| "12"`	`"4"`	Jarak antar item dari spacing scale.
align	`"start" \| "center" \| "end" \| "stretch"`	—	Align-items.
justify	`"start" \| "center" \| "end" \| "between" \| "around"`	—	Justify-content.
wrap	`boolean`	`false`	Aktifkan flex-wrap.
as	`ElementType`	`"div"`	Polymorphic — render sebagai tag lain (mis. ul, section).