Lucent UI
← StackRowDivider →
✦ LLM-ready

Row

atom

Horizontal flex layout primitive with the same API as Stack. Default gap and alignment are tuned for horizontal layouts like label/action pairs and button groups. Gap values reference spacing tokens so density presets scale automatically.

"Add a Row from lucent-ui with gap="3" to horizontally arrange action buttons."

Usage

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

<Row gap="3" align="center" as="div" />

Installation

pnpm add lucent-ui

API Reference

Row props — * required

PropTypeDefaultDescription
gap"0" | "1" | "2" | "3" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24""3"Horizontal gap between children using spacing tokens.
align"stretch" | "start" | "center" | "end""center"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.