Stack

One-axis flex layout with token gaps. A row wraps instead of overflowing.

Import

import { Stack } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/stack.

Usage

<Stack>
  <>
          <Button>Save</Button>
          <Button variant="secondary">Cancel</Button>
          <Button variant="ghost">Discard</Button>
        </>
</Stack>

Props

Prop	Type	Default	Description
direction	"row" | "column"	"column"	column stacks children vertically, row lays them out inline and wraps. Defaults to column.
gap	"sm" | "md" | "lg" | "xs" | "none" | "xl"	"md"	Space between children. Defaults to md.
align	"center" | "end" | "start" | "baseline" | "stretch"		Cross-axis alignment. Defaults to stretch for a column and center for a row.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Column
• Row

Source

packages/ui/src/containers/stack/stack.tsx