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>

string | number

default:"md"

Space between children. Can be a preset (xs, sm, md, lg, xl, 2xl) or a number.

string

default:"center"

Vertical alignment of children: flex-start, center, flex-end, stretch, baseline.

string

default:"flex-start"

Horizontal alignment of children: flex-start, center, flex-end, space-between, space-around, space-evenly.

boolean

default:"false"

Whether children should wrap to the next line.

string | number | object

Padding around the row content. Can be a preset, number, or object { x, y, top, ... }.

number

Flex grow factor when inside another flex container.

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

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