Components

Stack

Vertical layout container based on flexbox column

Overview

Stack is a vertical layout container. display: flex and flex-direction: column are applied by default.

Polymorphic — Render as any HTML element via the as prop
Interaction States — Supports state-based styling with _hover, _active, _focus, etc.
Sprinkles support — All design token props available

It is the vertical counterpart of Inline. The API is identical.

Basic Usage

import { Stack } from '@illog/ui'
 
<Stack gap="400">
  <Text textStyle="heading">Title</Text>
  <Text textStyle="bodyBase">Body content goes here.</Text>
  <Button variant="primary">Confirm</Button>
</Stack>

Direction

// Reverse order
<Stack direction="column-reverse" gap="300">
  <Text>First (displayed at bottom)</Text>
  <Text>Second (displayed at top)</Text>
</Stack>

Props

Prop	Type	Default	Description
`as`	`ElementType`	`'div'`	HTML element to render
`direction`	`'column' \| 'column-reverse'`	`'column'`	Layout direction
`gap`	`Sprinkles['gap']`	—	Gap between child elements
`align`	`Sprinkles['alignItems']`	—	Cross-axis alignment
`justify`	`Sprinkles['justifyContent']`	—	Main-axis alignment
`wrap`	`Sprinkles['flexWrap']`	`'nowrap'`	Whether to wrap
`_hover`	`object`	—	Hover state styles
`_active`	`object`	—	Active state styles
`_focus`	`object`	—	Focus state styles
`_focusVisible`	`object`	—	Focus-visible state styles
`_disabled`	`object`	—	Disabled state styles
`isActive`	`boolean`	—	Force active state
`isDisabled`	`boolean`	—	Force disabled state
`...sprinkles`	`Sprinkles`	—	Design token props

Guidelines

Use Stack for listing form fields or arranging content inside cards
direction="column-reverse" is useful for reverse-scroll UIs like chat
Combining Inline and Stack allows building complex layouts with token-based spacing