/ux
Components/Layout/Stack

Stack

Layout

Vertical flex column with consistent gap between children.

The go-to vertical layout primitive. Accepts a gap token (xs–xl) or pixel value. align controls cross-axis alignment; justify controls main-axis distribution.

Usage

import { Stack } from "nosible-ux"

export default function Example() {
  return (
    <Stack gap="md">
      <div>Signal A</div>
      <div>Signal B</div>
      <div>Signal C</div>
    </Stack>
  )
}

Examples

Alignment and justification

New signalMatched

Gap tokens

Rate decisionEarnings reportGuidance update

Accessibility

Renders a <div> (or the child element via asChild). No additional ARIA attributes — structure comes from context.

Props

Name TypeDefaultDescription
align
StackAlign | undefined—Cross-axis alignment (align-items). Default: 'stretch'.
asChild
boolean | undefined—When true, merges Stack styles onto the child element instead of a wrapper div.
gap
number | "xs" | "sm" | "md" | "lg" | "xl" | undefined—Gap between children. Accepts a pixel number, a design token ('xs' | 'sm' | 'md' | 'lg' | 'xl'), where xs=8 sm=12 md=20 lg=32 xl=48. Default: 20 (base grid).
justify
StackJustify | undefined—Main-axis justification (justify-content). Default: 'start'.
← All ComponentsGetting Started →