Lucent UI
← ProgressStackRow →
✦ LLM-ready

Stack

atom

Vertical flex layout primitive. Accepts a gap spacing token (0–24), align, justify, wrap, and a polymorphic as prop (div, section, nav, form, fieldset, ul, ol). Gap values reference spacing tokens so density presets scale layout automatically.

"Add a Stack from lucent-ui with gap="6" to vertically space a heading, description, and action button."

Usage

React / JSX
import { Stack } from 'lucent-ui'

<Stack gap="4" align="stretch" as="div" />

Installation

pnpm add lucent-ui

API Reference

Stack props — * required

PropTypeDefaultDescription
gap"0" | "1" | "2" | "3" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24""4"Vertical gap between children using spacing tokens.
align"stretch" | "start" | "center" | "end""stretch"Cross-axis alignment.
justify"start" | "center" | "end" | "between" | "around" | "evenly"—Main-axis distribution.
as"div" | "section" | "nav" | "form" | "fieldset" | "ul" | "ol""div"Rendered HTML element.
wrapbooleanfalseAllow children to wrap.