Skip to content
← Inventory

Stack

Flex container for arranging children in a line with consistent spacing. Layout props (direction, align, justify, gap) accept a single value or a per-breakpoint responsive object like { base: "column", md: "row" }; set responsiveMode to "container" to resolve breakpoints against the nearest container instead of the viewport. Stacks vertically by default.

First
Second
Third

Usage

import { HStack, Stack, StackProps, VStack } from "@desk/ui/components/stack";

Best practices

  • Stack is a gapped one-axis line, vertical by default — use HStack/VStack to lock direction; for full flexbox control (justify/wrap) reach for Flex.

  • as and asChild are mutually exclusive (asChild wins, dev-warned); as draws from the closed layout vocabulary, so as="button" is a type error (use Button).

Props

HStack

PropTypeDefaultDescription
asChildbooleanfalse

Merge props onto the single child element instead of rendering a div.

gapResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">"base"

Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.

alignResponsiveValue<FlexAlign>"stretch"

Cross-axis alignment. Accepts a per-breakpoint responsive object.

justifyResponsiveValue<FlexJustify>"flex-start"

Main-axis distribution. Accepts a per-breakpoint responsive object.

responsiveModeResponsiveMode"screen"

Whether responsive values resolve against the viewport ("screen") or nearest container ("container").

as"div" | "li" | "nav" | "ol" | "span" | "ul" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "main" | "section"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Ref and event-handler types remain the default element's (HTMLDivElement). as and asChild are mutually exclusive; if both are passed, asChild wins (a dev-only warning fires).

guidelinesbooleanfalse

Show dashed outline guidelines during development.

Stack

PropTypeDefaultDescription
alignResponsiveValue<FlexAlign>"stretch"

Cross-axis alignment. Accepts a per-breakpoint responsive object.

as"div" | "li" | "nav" | "ol" | "span" | "ul" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "main" | "section"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Ref and event-handler types remain the default element's (HTMLDivElement). as and asChild are mutually exclusive; if both are passed, asChild wins (a dev-only warning fires).

asChildbooleanfalse

Merge props onto the single child element instead of rendering a div.

directionResponsiveValue<FlexDirection>"column"

Main-axis direction. Accepts a per-breakpoint responsive object.

gapResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">"base"

Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.

guidelinesbooleanfalse

Show dashed outline guidelines during development.

justifyResponsiveValue<FlexJustify>"flex-start"

Main-axis distribution. Accepts a per-breakpoint responsive object.

responsiveModeResponsiveMode"screen"

Whether responsive values resolve against the viewport ("screen") or nearest container ("container").

VStack

PropTypeDefaultDescription
asChildbooleanfalse

Merge props onto the single child element instead of rendering a div.

gapResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">"base"

Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.

alignResponsiveValue<FlexAlign>"stretch"

Cross-axis alignment. Accepts a per-breakpoint responsive object.

justifyResponsiveValue<FlexJustify>"flex-start"

Main-axis distribution. Accepts a per-breakpoint responsive object.

responsiveModeResponsiveMode"screen"

Whether responsive values resolve against the viewport ("screen") or nearest container ("container").

as"div" | "li" | "nav" | "ol" | "span" | "ul" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "main" | "section"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Ref and event-handler types remain the default element's (HTMLDivElement). as and asChild are mutually exclusive; if both are passed, asChild wins (a dev-only warning fires).

guidelinesbooleanfalse

Show dashed outline guidelines during development.

Also exports

  • interfaceStackProps

Composition

Used by

Empty, FileUploadDropzone, MobileNavigationRoot, ProductCard, ProductSpecificationsSelector, PromptPanel, Sidepanel, Skeleton