ABBA UIv0.1.0
Layout

Stack

Vertical layout with token spacing.

Server-renderable1 export

Stacks children in a column with a gap from the spacing scale. Stack and Inline share one internal flex implementation, so their alignment props behave identically.

Import

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

Also available from the subpath entry @abbainitiative/ui/stack.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Vertical rhythm

First

Second

Third

<Stack gap={3}>
  <Text>First</Text>
  <Text>Second</Text>
  <Text>Third</Text>
</Stack>

Props

Stack props. All native attributes of the underlying element are also accepted and forwarded.
PropTypeDefaultDescription
gapSpaceTokenSpace between children.
align"start" | "center" | "end" | "stretch" | "baseline"Cross-axis alignment.
justify"start" | "center" | "end" | "between" | "around" | "evenly"Main-axis distribution.
fullWidthbooleanfalseStretch to fill the container's inline size.

Accessibility

  • Purely presentational; contributes no semantics.
  • Use `as="ul"` when the stacked items are genuinely a list.