Row
Horizontal arrangement with the same gap scale, wrapping by default so a row of chips or badges never overflows.
import Row from '@/components/ui/Row';Source: src/components/ui/Row.tsx
Examples
Justification
start
b
c
center
b
c
end
b
c
between
b
c
Wrapping
Rows wrap by default. Turn it off for a toolbar that must stay on one line — and then make sure it can scroll, or it will clip on a phone.
wraps
by
default
always
wrap
false
plus
scroll
Cross-axis alignment
center by default. baseline is the one worth knowing: it lines up text of different sizes on their baselines rather than their boxes, which is what a heading beside a caption needs.
Heading
align="center"
Heading
align="baseline"
Props
<Row> props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | — |
gap | LayoutGap | 'md' | Space between children. Defaults to the 20px gutter. |
align | 'start' | 'center' | 'end' | 'baseline' | 'center' | — |
justify | 'start' | 'center' | 'end' | 'between' | 'start' | — |
wrap | boolean | true | — |
childrenrequired | ReactNode | — | — |
Also accepts everything in HTMLAttributes<HTMLElement> — so native attributes (id, onClick, aria-*, data-*) pass straight through.