layout
Layout primitives — Stack, Grid and Container.
Style-driven layout building blocks. Each is polymorphic (as) and sets its
geometry inline, so there's no per-instance CSS to author. Spacing props take a
token step (a number → --flx-ui-space-N) or a raw CSS length.
Installation
pnpm add @fluixi-ui/layout
Stack
A flexbox stack — children along one axis with a consistent gap.
import { Stack } from '@fluixi-ui/layout';
<Stack gap={3}>…</Stack>
<Stack direction="row" gap={2} align="center" justify="space-between">…</Stack>
| Prop | Type | Description |
|---|---|---|
direction |
row | column | row-reverse | column-reverse |
Main axis. Default column. |
gap |
number | string |
Gap between children. |
align / justify |
string |
align-items / justify-content. |
wrap |
boolean | 'wrap' | 'nowrap' | 'wrap-reverse' |
Allow wrapping. |
inline |
boolean |
inline-flex instead of flex. |
Grid
A CSS grid. columns accepts a count (equal tracks) or a raw template.
import { Grid } from '@fluixi-ui/layout';
<Grid columns={3} gap={4}>…</Grid>
<Grid columns="1fr 2fr" gap={2}>…</Grid>
| Prop | Type | Description |
|---|---|---|
columns / rows |
number | string |
Track count (equal) or a raw template. |
gap / columnGap / rowGap |
number | string |
Grid gaps. |
align / justify |
string |
align-items / justify-items. |
inline |
boolean |
inline-grid instead of grid. |
Container
A centred, max-width wrapper with horizontal padding.
import { Container } from '@fluixi-ui/layout';
<Container>…</Container>
<Container size="md" padding={6}>…</Container>
| Prop | Type | Description |
|---|---|---|
size |
sm | md | lg | xl | full | CSS length |
Max width. Default lg. |
padding |
number | string |
Horizontal padding. Default 4. |
centered |
boolean |
Centre horizontally. Default true. |
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.