Skip to main content

Stack

Status: No dedicated documentation exists in design-system-docs (checked main + all open PRs, verified 2026-08-19). This is a factual scaffold, not real guidance — every qualitative section below is an explicit placeholder for a human writer. Nothing has been invented.

Source: DTSL/design-system → packages/product/@dtsl-react/src/components/atomic/Stack/Stack.tsx (package @dtsl/react, exported as Stack, HStack, VStack)

Props (verbatim from source)​

interface StackProps {
	flex?: CSSProperties['flex']
	spacing?: number
	children: ReactNode
	vertical?: boolean
	inline?: boolean
	justify?: CSSProperties['justifyContent']
	align?: CSSProperties['alignItems']
	wrap?: CSSProperties['flexWrap']
	height?: CSSProperties['height']
	overflow?: CSSProperties['overflow']
	position?: CSSProperties['position']
	testHandle?: string
	/** Inline styles applied to the Stack element. Values are merged with and can override internal styles.
	 *  Prefer Naos CSS variables over hardcoded values (e.g. 'var(--sib-spacing_2)' over '16px'). */
	style?: CSSProperties
	className?: string
}

type StackChildProps = Omit<StackProps, 'vertical'>

HStack and VStack are exported alongside Stack — presumably horizontal/vertical convenience wrappers (StackChildProps omits vertical, consistent with that).

Real source comment found (not invented): the inline JSDoc on style explicitly says to prefer Naos CSS variables (e.g. var(--sib-spacing_2)) over hardcoded values — this is a genuine usage rule worth keeping in the real doc.

When to Use​

TODO — no existing UX/product guidance found in source, Storybook, or docs beyond the CSS-variable note above. Needs input from design/PM.

When NOT to Use​

TODO — needs UX/product input. Name the alternative component if one exists (e.g. Grid for two-dimensional layout).

Decision Logic​

TODO — needs UX/product input on choosing Stack vs HStack vs VStack vs Grid.

Accessibility​

TODO — needs UX/product input.

Common Mistakes​

  • ❌ Hardcoding spacing/style values instead of Naos CSS variables (per the source comment above)
  • TODO — remaining items need UX/product input.