For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/components/stack.md.
Design System

    Stack

    A column or row of children with a gap from the spacing scale — gap defaults to 4, which is the practical difference from Flex. Reach for VStack or HStack rather than Stack with a direction: they read better in a tree, and HStack centres its items for you. Children have to be elements — a bare string is dropped rather than rendered.

    Source · Storybook

    Usage

    import { Stack } from '@wallarm-org/design-system/Stack';

    Examples

    Direction

    VStack and HStack are the same component with the direction fixed — and HStack also switches align to center, since a row of mixed heights almost always wants that.

    Alignment

    align positions the children across the stack, not along it: in a column that is left, centre and right.

    Spacing

    gap takes the spacing scale rather than a free number, which is what keeps rhythm consistent between two screens built by two people.

    Wrap

    With wrap, a row that runs out of width breaks onto the next line instead of overflowing its container.

    Flex behavior

    The four sizing knobs against a fixed parent: fullWidth fills it, flexGrow takes the leftover space, and flexShrink={false} refuses to be squeezed — which is what makes the last row overflow on purpose.

    Props

    PropTypeDefaultDescription
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    titlestring | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    align{ start: string; center: string; end: string; stretch: string; baseline: string; }stretch
    inline{ true: string; false: string; }false
    fullWidth{ true: string; }
    wrap{ wrap: string; nowrap: string; reverse: string; }nowrap
    direction{ row: string; column: string; 'row-reverse': string; 'column-reverse': string; }column
    justify{ start: string; center: string; end: string; between: string; around: string; evenly: string; }start
    gapcomplex4
    flexGrow{ true: string; }
    flexShrink{ true: string; false: string; }
    data-testidstring | undefined
    asChildboolean | undefinedfalse

    HStack

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    asChildboolean | undefined
    data-testidstring | undefined
    align{ start: string; center: string; end: string; stretch: string; baseline: string; }center
    inline{ true: string; false: string; }
    fullWidth{ true: string; }
    wrap{ wrap: string; nowrap: string; reverse: string; }
    justify{ start: string; center: string; end: string; between: string; around: string; evenly: string; }start
    gapcomplex
    flexGrow{ true: string; }
    flexShrink{ true: string; false: string; }

    VStack

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    asChildboolean | undefined
    data-testidstring | undefined
    align{ start: string; center: string; end: string; stretch: string; baseline: string; }
    inline{ true: string; false: string; }
    fullWidth{ true: string; }
    wrap{ wrap: string; nowrap: string; reverse: string; }
    justify{ start: string; center: string; end: string; between: string; around: string; evenly: string; }
    gapcomplex
    flexGrow{ true: string; }
    flexShrink{ true: string; false: string; }