Layout

Stack

One-dimensional layout with gaps from the spacing scale.

import { Stack } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Rows and alignment

Schema 1.7MITCommunity

stack/rows.tsx

import { Badge, Button, Stack } from '@jsonresume/ui';

export default function StackRows() {
  return (
    <Stack gap={4}>
      <Stack direction="row" gap={2} wrap>
        <Badge tone="brand">Schema 1.7</Badge>
        <Badge>MIT</Badge>
        <Badge tone="outline">Community</Badge>
      </Stack>
      <Stack direction="row" gap={2} justify="end">
        <Button variant="ghost">Cancel</Button>
        <Button variant="primary">Save</Button>
      </Stack>
    </Stack>
  );
}

Accessibility

Visual order matches source order; avoid reversing it with CSS.

Props

<Stack>

Also accepts the attributes of the element Stack renders.
Prop	Type	Default	Description
align	centerendstartbaselinestretch	–	Style variant.
asChild	boolean	–	Render as the single child element instead of a <div>.
direction	rowcolumn	column	Style variant.
gap	012345681012	4	Style variant.
justify	centerendstartbetween	–	Style variant.
wrap	boolean	–	Style variant.