Stack

Lays out its children in a column or a row with spacing from the design tokens. It covers most layout needs without Tailwind, and it is the layout building block for generated windows.

import { Stack } from 'jarvis-react-ui';

Column

By default the children stack top to bottom and stretch to the full width. gap takes a spacing step: xs (4px), sm (8px), md (12px, the default), lg (24px), xl (32px) or none. The steps read the --s-* tokens, so they follow a theme.

import { Button, Label, Metric, Stack } from 'jarvis-react-ui';

export default function Column() {
    return (
        <Stack gap="sm">
            <Label>Reactor output</Label>
            <Metric value={87} unit="%" />
            <Button variant="primary">Run diagnostics</Button>
        </Stack>
    );
}

Row

direction="row" lays the children out left to right. align sets the cross-axis alignment, justify the distribution along the row, and wrap lets them flow onto further lines. Stacks nest.

import { Button, Pill, Stack } from 'jarvis-react-ui';

export default function Row() {
    return (
        <Stack direction="row" align="center" justify="between" gap="md" wrap className="w-full">
            <Stack direction="row" align="center" gap="xs">
                <Pill variant="ok">online</Pill>
                <Pill>3 tasks</Pill>
            </Stack>
            <Stack direction="row" gap="sm">
                <Button size="sm">Cancel</Button>
                <Button size="sm" variant="primary">
                    Engage
                </Button>
            </Stack>
        </Stack>
    );
}

Accessibility

Stack renders a plain <div> and adds no semantics. Pass role or aria-* attributes when the group needs them; they reach the root element, and so does the ref.

API

Also accepts inherited props from HTMLAttributes (54), AriaAttributes (53), DOMAttributes (169), RefAttributes (1), Attributes (1).