Layout

Stack

Flex container with a token-based gap. `Flex` is the horizontal alias.

Server safe2 exportsSource

Import

import { Flex, Stack } from '@the_viveksingh/vivek-ui'

Vertical by default

Stack is flexbox with a gap on the token scale. Gap rather than margin means no collapsing and no last-child exceptions.

Vertical by default

Gap sits on the --vk-space scale

No margins to collapse

<Stack gap={3}>
  <Box className="tile">Vertical by default</Box>
  <Box className="tile">Gap sits on the --vk-space scale</Box>
  <Box className="tile">No margins to collapse</Box>
</Stack>

Horizontal, wrapping

One

Two

Three

<Stack direction="horizontal" gap={3} wrap>
  <Box className="tile">One</Box>
  <Box className="tile">Two</Box>
  <Box className="tile">Three</Box>
</Stack>

Push items apart

The row every summary line needs: label on the left, value on the right.

Total

$4,280.00

<Stack direction="horizontal" justify="between" align="center" gap={3}>
  <Text weight="semibold">Total</Text>
  <Text>$4,280.00</Text>
</Stack>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Stack
Prop	Type	Default	Description
`as`	`ElementType`	—	—
`direction`	`'vertical' \| 'horizontal'`	—	Main axis. `vertical` (default) stacks children top-to-bottom.
`gap`	`StackGap`	—	Gap on the `--vk-space-*` scale.
`align`	`StackAlign`	—	—
`justify`	`StackJustify`	—	—
`wrap`	`boolean`	—	Allow children to wrap onto multiple lines.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Exports

FlexStack

Rendering

Server safe

Stack carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.