Skip to content
Components

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 "@instruments/materia-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 render are mutually exclusive (render wins, dev-warned); as draws from the closed layout vocabulary, so as="button" is a type error (use Button).

  • Use as to change the element (a tag); use render only to swap in a component (e.g. a router Link). Never render={<Box as=…/>} - pass as directly.

Props

HStack

PropTypeDefaultDescription
refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

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

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

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

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. Event handlers and the ref accept any host element. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

alignLayoutResponsiveValue<FlexAlign>"stretch"

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

responsiveModeResponsiveMode"screen"

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

justifyLayoutResponsiveValue<FlexJustify>"flex-start"

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

guidelinesbooleanfalse

Show dashed outline guidelines during development.

Stack

PropTypeDefaultDescription
alignLayoutResponsiveValue<FlexAlign>"stretch"

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

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

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. Event handlers and the ref accept any host element. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

directionLayoutResponsiveValue<FlexDirection>"column"

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

gapLayoutResponsiveValue<"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.

justifyLayoutResponsiveValue<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").

refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

VStack

PropTypeDefaultDescription
refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

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

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

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

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. Event handlers and the ref accept any host element. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

alignLayoutResponsiveValue<FlexAlign>"stretch"

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

responsiveModeResponsiveMode"screen"

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

justifyLayoutResponsiveValue<FlexJustify>"flex-start"

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

guidelinesbooleanfalse

Show dashed outline guidelines during development.

Also exports

  • interfaceStackProps

Composition

Used by

Empty, FileUploadDropzone, Item, MegaMenu, MobileNavigationRoot, ProductCard, ProductSpecificationsSelector, PromptPanel, QuickView, Sidepanel, SiteFooter, Skeleton