CSSN'T Components

Design system

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

Row + gapScale

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

Column stack

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

Wrap chips

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.
A
B
C
In the preview above, gapScale is ignored because variants is provided.

variants

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"
1
2
3
align="center"
1
2
3
align="end"
1
2
3
justify="start"
A
B
C
justify="center"
A
B
C
justify="end"
A
B
C

Alignment examples

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

isFull

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

Dashboard-style layout

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

Playground

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

Flexbox layout utility component that composes classes (direction, wrap, alignment, spacing) and renders a single <div> wrapper.

Purely presentational: it only maps props to classes and renders `children`.

When `variants` is set, `gapScale` is ignored (preset spacing wins).

Class composition: base `cssnt-stack` → layout (direction/wrap/inlineBlock/align/justify) → `variants` → `gapScale` (only if variants is not set) → `isFull`.

Stack props
PropTypeRequiredDefaultDescription
directionstringNon/aFlex direction class (from `directionClasses`). Common values are: `row`, `column`, `row-reverse`, `column-reverse` (depends on your `Stack.variants`). (Values: row, column, row-reverse, column-reverse)
wrapstringNon/aWrap behavior class (from `wrapClasses`). Common values are: `nowrap`, `wrap`, `wrap-reverse`. (Values: nowrap, wrap, wrap-reverse)
inlineBlockstringNon/aDisplay helper class (from `inlineBlockClasses`) to render the stack as inline/inline-block (exact values depend on your `Stack.variants`). (Values: inline, inline-block)
alignstringNon/aAlign items class (from `alignClasses`). Common values are: `start`, `center`, `end`, `stretch`. (Values: start, center, end, stretch)
justifystringNon/aJustify content class (from `justifyClasses`). Common values are: `start`, `center`, `end`, `space-between`, `space-around`, `space-evenly`. (Values: start, center, end, space-between, space-around, space-evenly)
variants"dense" | "normal" | "spacious"Non/aSpacing preset (from `variantClasses`). When provided, it takes priority over `gapScale`. (Values: dense, normal, spacious)
gapScale0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10Non/aGap scale class (from `gapScaleClasses`). Only applied when `variants` is not provided. (Values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
isFullbooleanNofalseAdds the full-width helper class (`fullWidthClass`).
customStylesReact.CSSPropertiesNon/aInline styles applied to the root container.
childrenReact.ReactNodeNon/aContent rendered inside the stack.