Stack

Generic flex stack — vertical or horizontal — with bounded gap, cross-axis alignment, and main-axis justification. Horizontal stacks always wrap so they never force overflow.

Layout

Usage

import { Stack } from "@zudo-sg/ui/src/shared/stack/stack";

<Stack gap="md">
  <div>First</div>
  <div>Second</div>
</Stack>

Default (vertical, gap=md)

Horizontal (wraps instead of overflowing)

Narrow (horizontal wraps without overflow)

Source

<Stack>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</Stack>

Live CSS

Injected into the previews above. Stack

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */