stack

Stack

Vertical/horizontal spacing composition.

Stack Examples

Copy-ready examples with live previews.

Basic usage

A simple row stack with a numeric spacing scale.

Live preview

Left

Right

import Stack from "@/packages/ui/src/_components/grid/stack/Stack";

export default function Example() {
  return (
    <Stack direction="row" gapScale={4}>
      <div>Left</div>
      <div>Right</div>
    </Stack>
  );
}

Column + alignment

Use a column direction for vertical layouts, and align for cross-axis placement.

Live preview

Title

Description

Actions

import Stack from "@/packages/ui/src/_components/grid/stack/Stack";

export default function Example() {
  return (
    <Stack direction="column" align="start" gapScale={2}>
      <div>Title</div>
      <div>Description</div>
      <div>Actions</div>
    </Stack>
  );
}

Wrap + justify

Wrap is useful for chips/tags that should flow to the next line.

Live preview

Chip 1

Chip 2

Chip 3

Chip 4

Chip 5

Chip 6

Chip 7

Chip 8

Chip 9

Chip 10

Chip 11

Chip 12

Chip 13

Chip 14

import Stack from "@/packages/ui/src/_components/grid/stack/Stack";

export default function Example() {
  return (
    <Stack direction="row" wrap="wrap" justify="center" gapScale={3}>
      {Array.from({ length: 12 }).map((_, i) => (
        <div key={i}>Chip {i + 1}</div>
      ))}
    </Stack>
  );
}

Spacing preset (variants)

Use variants to apply a spacing preset instead of gapScale.

Live preview

variants applies a spacing preset. If set, it takes priority over gapScale.

In the preview above, gapScale is ignored because variants is provided.

import Stack from "@/_components/grid/stack/Stack";

export default function Example() {
  return (
    <Stack direction="row" variants="spacious">
      <div>A</div>
      <div>B</div>
    </Stack>
  );
}

Align + justify

Maps to flex alignment classes (align-items / justify-content).

• Alignment is easier to see with fixed container height/width.

Live preview

Alignment is more visible when the container has a fixed height.

align="start"

align="center"

align="end"

justify="start"

justify="center"

justify="end"

import Stack from "@/packages/ui/src/_components/grid/stack/Stack";

export default function Example() {
  return (
    <div style={{ height: 96 }}>
      <Stack direction="row" align="center" justify="center" gapScale={2}>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </Stack>
    </div>
  );
}

Full width helper (isFull)

Adds a helper class for full-width layouts (useful inside constrained wrappers).

Live preview

isFull adds a full-width helper class (useful inside constrained wrappers).

Left

Right

import Stack from "@/packages/ui/src/_components/grid/stack/Stack";

export default function Example() {
  return (
    <div style={{ maxWidth: 420 }}>
      <Stack direction="row" justify="space-between" gapScale={2} isFull>
        <div>Left</div>
        <div>Right</div>
      </Stack>
    </div>
  );
}

Nested layouts

Compose multiple Stack instances to build common page sections.

Live preview

Header

Main A

Main B

Side 1

Side 2

import Stack from "@/packages/ui/src/_components/grid/stack/Stack";

export default function Example() {
  return (
    <Stack direction="column" gapScale={3} isFull>
      <div>Header</div>

      <Stack direction="row" gapScale={3} isFull>
        <Stack direction="column" gapScale={2} customStyles={{ flex: 1 }}>
          <div>Main A</div>
          <div>Main B</div>
        </Stack>

        <Stack direction="column" gapScale={2} customStyles={{ width: 180 }}>
          <div>Side 1</div>
          <div>Side 2</div>
        </Stack>
      </Stack>
    </Stack>
  );
}

Interactive playground

Quick way to test combinations (direction / wrap / variants / gapScale / isFull).

Live preview

directionwrap

variants

gapScale(ignored when variants is set)

isFull

One

Two

Three

Four

Five

Six

import { useState } from "react";
import Stack from "@/packages/ui/src/_components/grid/stack/Stack";

type Direction = "row" | "column";
type StackVariants = "dense" | "normal" | "spacious" | undefined;
type Wrap = "nowrap" | "wrap" | "wrap-reverse";

export default function Example() {
  const [direction, setDirection] = useState<Direction>("row");
  const [wrap, setWrap] = useState<Wrap>("nowrap");
  const [variants, setVariants] = useState<StackVariants>(undefined);
  const [gapScale, setGapScale] = useState<0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10>(4);

  return (
    <Stack
      direction={direction}
      wrap={wrap}
      variants={variants}
      gapScale={variants ? undefined : gapScale}
      isFull
    >
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </Stack>
  );
}

On this page

Stack Props

Stack — Props
Prop	Type	Required	Default	Description
direction	string	No	—	Flex direction class (from `directionClasses`). Common values are: `row`, `column`, `row-reverse`, `column-reverse` (depends on your `Stack.variants`).
wrap	string	No	—	Wrap behavior class (from `wrapClasses`). Common values are: `nowrap`, `wrap`, `wrap-reverse`.
inlineBlock	string	No	—	Display helper class (from `inlineBlockClasses`) to render the stack as inline/inline-block (exact values depend on your `Stack.variants`).
align	string	No	—	Align items class (from `alignClasses`). Common values are: `start`, `center`, `end`, `stretch`.
justify	string	No	—	Justify content class (from `justifyClasses`). Common values are: `start`, `center`, `end`, `space-between`, `space-around`, `space-evenly`.
variants	"dense" \| "normal" \| "spacious"	No	—	Spacing preset (from `variantClasses`). When provided, it takes priority over `gapScale`.
gapScale	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10	No	—	Gap scale class (from `gapScaleClasses`). Only applied when `variants` is not provided.
isFull	boolean	No	false	Adds the full-width helper class (`fullWidthClass`).
customStyles	React.CSSProperties	No	—	Inline styles applied to the root container.
children	React.ReactNode	No	—	Content rendered inside the stack.