Stack · Glowup

LAYOUT · 85 / 89

Stack

Stack — a Material You layout component for React Native and web.

󱀫

packages/ui/src/components/Layout/Stack.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

primary

secondary

tertiary

error

Properties

3 controls

Direction

Spacing

Reverse

Usage

Stack.tsx

Variants

The states and shapes this component is meant to be used in.

Direction

direction="vertical"

horizontal

Reverse

`reverse` flips the visual order without touching the children array.

Wrapped

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

3 on StackProps

Also accepts everything from Omit<BoxProps, "row" | "gap">.

direction

"vertical" | "horizontal"

default: "vertical"

Stacking axis. Defaults to `"vertical"`.

reverse

boolean

Reverses the visual order without touching the children array.

spacing

SpacingValue

default: "s"

Gap between children — a spacing token name or a raw value.

󰅁

󰅂