vaiperui

components / stack

Stack

Flex layout in one direction with gap, alignment and an optional divider.

How to use

Lines up children vertically (default) or horizontally. `direction` can change per breakpoint: `{ base: 'vertical', md: 'horizontal' }`. `divider` is rendered between every pair of children, never before the first or after the last.

preview
1
2
3
Stack.tsx
import { Divider, Stack } from "vaiperui";
 
<Stack direction={{ base: "vertical", md: "horizontal" }} gap={3} align="center"
  divider={<Divider orientation="vertical" />}>
  <span>One</span>
  <span>Two</span>
</Stack>

Direction

preview
1
2
3
vertical
1
2
3
horizontal
direction.tsx
<Stack direction="vertical" />
<Stack direction="horizontal" />

Gap

preview
1
2
3
gap={0}
1
2
3
gap={1}
1
2
3
gap={2}
1
2
3
gap={4}
1
2
3
gap={8}
gap.tsx
<Stack direction="horizontal" gap={1} />
<Stack direction="horizontal" gap={8} />

Align and justify

preview
1
2
align="end"
1
2
3
justify="between"
align.tsx
<Stack direction="horizontal" align="end" />
<Stack direction="horizontal" justify="between" />

Divider

preview
1
2
3
divider
divider.tsx
<Stack divider={<Divider />}>...</Stack>

Props

PropValuesDefaultDescription
directionvertical | horizontal | { base, sm, md, lg, xl }verticalMain axis, optionally per breakpoint
gap0 | 1 | 2 | 3 | 4 | 6 | 84Space between children (4px steps)
alignstart | center | end | stretch | baselinenoneCross axis alignment (`align-items`)
justifystart | center | end | between | around | evenlynoneMain axis distribution (`justify-content`)
wrapbooleanfalseLet children flow onto a new line
dividerReactNodenoneElement rendered between children
asElementType"div"Element or component to render (`section`, `ul`, `main`...)

Accessibility

  • Renders a plain `<div>` (flex) by default, with no role; `as` changes the element (for example `ul`, `nav`, `section`).
  • It adds no focus, keyboard or ARIA behavior; extra props reach the element.
  • Responsive `direction` only changes how it looks; reading and Tab order stay the DOM order.
  • The `divider` prop is inserted between children as given, so a `Divider` there is announced as a separator unless it is `decorative`.

Keep in mind

  • With `as="ul"`, a divider between items becomes a non-`li` child of the list, which is invalid HTML.