Stack

A flexible layout component that uses flexbox to create responsive layouts with easy alignment and spacing.

Import

import { Stack } from '@vortex-kit/vortex';
import type { StackProps } from '@vortex-kit/vortex';

Display

<Stack direction="row" gap={4} align="center">
      <Stack.Item grow>
          {children}
      </Stack.Item>
</Stack>

Allied components

Grid Container

Stack

Prop	Type	Default
`children`	`React.ReactNode`	No default value
`as`	`keyof React.JSX.IntrinsicElements`	`div`
`divider`	`boolean`	No default value
`direction`	`union`	No default value
`gap`	`number`	No default value
`wrap`	`boolean`	No default value
`align`	`union`	No default value
`justify`	`union`	No default value
`height`	`union`	No default value
`width`	`union`	No default value
`aspectRatio`	`number`	No default value
`maxHeight`	`union`	No default value
`maxWidth`	`union`	No default value
`minHeight`	`union`	No default value
`minWidth`	`union`	No default value
`padding`	`number`	No default value
`paddingTop`	`number`	No default value
`paddingBottom`	`number`	No default value
`paddingStart`	`number`	No default value
`paddingEnd`	`number`	No default value
`paddingInline`	`number`	No default value
`paddingBlock`	`number`	No default value
`margin`	`number`	No default value
`marginTop`	`number`	No default value
`marginBottom`	`number`	No default value
`marginStart`	`number`	No default value
`marginEnd`	`number`	No default value
`marginInline`	`number`	No default value
`marginBlock`	`number`	No default value
`bleed`	`number`	No default value
`textAlign`	`union`	No default value
`backgroundColor`	`union`	No default value
`borderColor`	`union`	No default value
`borderRadius`	`union`	No default value
`position`	`union`	`relative`
`inset`	`number`	No default value
`insetStart`	`number`	No default value
`insetEnd`	`number`	No default value
`insetTop`	`number`	No default value
`insetBottom`	`number`	No default value
`zIndex`	`number`	No default value
`overflow`	`union`	No default value
`animated`	`boolean`	No default value
`className`	`union`	No default value
`attributes`	`G.Attributes<TagName>`	No default value
`grow`	`boolean`	No default value

Stack.Item

Prop	Type	Default
`gap`	`string`	No default value
`wrap`	`boolean`	No default value
`nowrap`	`union`	No default value
`order`	`number`	No default value
`columns`	`union`	No default value
`grow`	`boolean`	No default value
`gapBefore`	`union`	No default value
`as`	`keyof React.JSX.IntrinsicElements`	`div`
`attributes`	`G.Attributes<TagName>`	No default value
`className`	`union`	No default value
`children`	`React.ReactNode`	No default value