Layout primitivesFlex

Stack.

Stack lays children out top to bottom with one consistent gap. It is the vertical flex container: the default for forms, lists, card bodies, and anything that reads in order.

TypeScriptRenders div.flex.flex-colAccepts native props

When to reach for it

Usage

Stack is a thin wrapper over Tailwind utilities, so it costs nothing at runtime and composes with every other primitive.

  • Form sections, settings groups, and anything that reads top to bottom.
  • Replacing ad-hoc margin-bottom utilities with a single owner of spacing.
  • Fixed-height cards that pin a footer to the bottom with justify="between".
Import
import { Stack } from "@/components/ui/stack";

In practice

Examples

Each example is a real composition with shadcn components. Switch to the Code tab for the source, or copy it directly.

Form section

Nested Stacks own every vertical distance: the section gap, the field gap, and the heading gap are each declared once.

Profile

This is how teammates see you across the workspace.

Activity feed

A tight gap keeps repeated rows scannable. Row handles the horizontal structure, and a growing Col gives the text the remaining width.

Mara Okafor approved the spacing audit

Design lead
2m

Jonas Lindqvist opened PR #412 · Page aside

Engineer
18m

Priya Natarajan commented on Dashboard v2

Product
1h

Theo Marchetti shipped Grid responsive map

Engineer
3h

Pinned card footer

justify="between" pushes the price and button to the bottom of fixed-height cards, regardless of how long the summary runs.

StarterFor individuals exploring the kit.
$0
TeamShared libraries, review flows, and priority support for growing product teams.
$24
EnterpriseSSO, audit logs, and a dedicated success manager.
Custom

Responsive gap

gap, align, and justify all accept a breakpoint map. Resize the window to watch the spacing open up.

Release notes

Responsive gaps without a single media query.

Every breakpoint class is written out in source.

Gap scale

Every value on the scale maps to a Tailwind gap utility.

Playground
Header
Content
Footer
Gap
16px between items

Reference

Props

Every primitive also accepts the native props of its element, including className, children, ref, and data attributes.

PropTypeDefault
gap

Space between children on the Tailwind spacing scale (gap-4 is 1rem).

Responsive<0 | 1 | 2 | 3 | 4 | 6 | 8 | 12>4
align

Cross-axis (horizontal) alignment, mapped to the items-* utilities.

Responsive<"start" | "center" | "end" | "stretch" | "baseline">"stretch"
justify

Main-axis (vertical) distribution, mapped to the justify-* utilities.

Responsive<"start" | "center" | "end" | "between" | "around" | "evenly">"start"

Good to know

Notes

  • Stack never adds outer margin. Spacing between a Stack and its siblings belongs to the parent.
  • Stack and Row accept exactly the same gap, align, and justify values; only the axis and the align default differ.
  • Responsive props take a single value or a map of base, sm, md, lg, xl, and 2xl. Breakpoints use Tailwind defaults: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px.