Components / layout

layout · @awesome-ds/react

Stack

Vertical flex stack with gap tokens.

Rules: rule.foundations.semantic-tokens

State matrix

idlerequired

Anatomy

  • vertical flex container
  • ordered children
  • tokenized gaps

Keyboard contract

Does not alter descendant order or focus behavior.

Screen-reader contract

Adds no role; DOM order remains reading order.

Content rules

  • Use for one-dimensional vertical rhythm.
  • Keep source order meaningful.

Public API

PropTyperequiredDescription
gap1 | 2 | 3 | 4 | 6 | 8—Vertical token gap
childrenReactNode—Ordered content
…nativeHTMLAttributes<HTMLDivElement>—Native div attributes

Adaptation contracts

RTL
Logical properties and DOM order determine layout and reading order.
High contrast
Never clip descendant outlines or depend on decorative surfaces for grouping.
Reduced motion
Responsive reflow is immediate and does not animate layout geometry.

Verification IDs

Stack/token-gap

Live

Live

Copyable example

import { Stack } from "@awesome-ds/react";

<Stack gap={4}>…</Stack>