import { Stack } from '@uhg-abyss/web/ui/Stack';

align

justify

gap

() => {
  return (
    <Stack css={{ height: '260px' }}>
      <Docs.ExampleBoxV2>Item 1</Docs.ExampleBoxV2>
      <Docs.ExampleBoxV2>Item 2</Docs.ExampleBoxV2>
      <Docs.ExampleBoxV2>Item 3</Docs.ExampleBoxV2>
    </Stack>
  );
};

Gap, align, and justify

Use the gap prop to set the space between children. This corresponds to the CSS gap value. Accepts a $web.semantic.spacing.scale.* token (e.g. $web.semantic.spacing.scale.lg) or a raw CSS length. Defaults to $web.semantic.spacing.scale.lg.

Use the align prop to control cross-axis (horizontal) alignment. This corresponds to the CSS align-items value. The possible values are 'stretch', 'flex-start', 'flex-end', 'center', or 'baseline'. Defaults to 'stretch'.

Use the justify prop to control main-axis (vertical) alignment. This corresponds to the CSS justify-content value. The possible values are 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', or 'space-evenly'. Defaults to 'flex-start'.

Use case: form fields

A common use case for Stack is to arrange form fields vertically with consistent spacing. The gap prop can be used to set the space between each field.

Stack Props

Name	Type	Default	Description
align	"center" | "baseline" | "flex-start" | "flex-end" | "stretch" | undefined	'stretch'	Cross-axis (horizontal) alignment of children.
asElement	string | undefined	'div'	Determine what type of html element the Stack will render
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined		The elements to stack vertically. Rendered as-is, with no wrapper elements added around individual children.
className	string | undefined		CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-stack-root", CSSProperties>> | undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean | undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
gap	Space | undefined	'$web.semantic.spacing.scale.lg'	The space between children — a $web.semantic.spacing.scale.* token or a raw CSS length.
hiddenFrom	Breakpoint | undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
justify	"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined	'flex-start'	Main-axis (vertical) distribution of children.
slotProps	Partial<Record<"stack-root", SlotPropsLeafValue>> | undefined
visibleFrom	Breakpoint | undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Stack Classes

Class Name	Description
.abyss-stack-root	Stack root element