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

align

justify

gap

() => {
  const ExampleBox = useMemo(() => {
    return styled('div', {
      static: {
        padding: '$web.semantic.spacing.scale.lg',
        borderRadius: '$web.semantic.border-radius.container.large',
        backgroundColor: '$web.semantic.color.surface.container.primary',
        color: '$web.semantic.color.text.content.primary-alt',
      },
    });
  }, []);

  return (
    <Stack css={{ height: '260px' }}>
      <ExampleBox>Item 1</ExampleBox>
      <ExampleBox>Item 2</ExampleBox>
      <ExampleBox>Item 3</ExampleBox>
    </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	Required	Description
align	'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | undefined	'stretch'	-	Cross-axis (horizontal) alignment of children.
asElement	string | undefined	'div'	-	Determine what type of html element the Stack will render
children	React.ReactNode | undefined	-	-	The elements to stack vertically. Rendered as-is, with no wrapper elements added around individual children.
gap	Abyss.Space | undefined	'$web.semantic.spacing.scale.lg'	-	The space between children — a $web.semantic.spacing.scale.* token or a raw CSS length.
justify	'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | undefined	'flex-start'	-	Main-axis (vertical) distribution of children.

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

Stack.types.ts

Stack Classes

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