Layout

Stack

One-dimensional flex layout with a 0.25rem spacing-grid gap. HStack and VStack are ready-made horizontal and vertical variants.

Import

import { Stack, HStack, VStack } from "@zephora/react";

Examples

Vertical stack

Numbers passed to `gap` map to a 0.25rem grid — gap={4} is 1rem.

First

Second

Third

<Stack gap={4}>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</Stack>

HStack and VStack

HStack lays items out in a row (center-aligned by default); VStack stacks them.

Shipping address221B Baker Street, London

<HStack gap={3}>
  <Button size="sm">Save</Button>
  <Button size="sm" variant="ghost">Cancel</Button>
</HStack>

<VStack gap={2} align="flex-start">
  <strong>Shipping address</strong>
  <span>221B Baker Street, London</span>
</VStack>

Wrap and justify

`wrap` lets items flow to the next line; `justify` distributes them.

One

Two

Three

Four

<Stack direction="row" gap={2} wrap justify="space-between">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</Stack>

API

Stack props

Prop	Type	Default	Description
`direction`	`"row" \| "column"`	`"column"`	Flex direction.
`gap`	`number \| string`	—	Gap between items. Numbers are a 0.25rem grid (4 → 1rem); strings pass through.
`align`	`CSSProperties["alignItems"]`	—	align-items value.
`justify`	`CSSProperties["justifyContent"]`	—	justify-content value.
`wrap`	`boolean`	`false`	Allow items to wrap.
`as`	`keyof JSX.IntrinsicElements`	`"div"`	Root element tag.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

HStack / VStack props

Prop	Type	Default	Description
`…StackProps`	`Omit<StackProps, "direction">`	—	Same props as Stack with the direction fixed. HStack defaults align to "center".