Skip to main content

​
Row

The Row component is a flex container that arranges its children horizontally. It’s the primary tool for building horizontal layouts.

​
Usage

<Row gap="md" align="center">
  <Text value="Item 1" />
  <Text value="Item 2" />
</Row>

​
Props

​
gap
string | number
default:"md"
Space between children. Can be a preset (xs, sm, md, lg, xl, 2xl) or a number.
​
align
string
default:"center"
Vertical alignment of children: flex-start, center, flex-end, stretch, baseline.
​
justify
string
default:"flex-start"
Horizontal alignment of children: flex-start, center, flex-end, space-between, space-around, space-evenly.
​
wrap
boolean
default:"false"
Whether children should wrap to the next line.
​
padding
string | number | object
Padding around the row content. Can be a preset, number, or object { x, y, top, ... }.
​
flex
number
Flex grow factor when inside another flex container.

​
Examples

​
Alignment

<Row justify="space-between" align="center" padding="md">
  <Text value="Left" />
  <Text value="Right" />
</Row>

​
Wrapping

<Row wrap gap="sm">
  <Badge label="Tag 1" />
  <Badge label="Tag 2" />
  <Badge label="Tag 3" />
</Row>