> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Row

> Horizontal flex container for laying out components

# Row

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

## Usage

```jsx theme={null}
<Row gap="md" align="center">
  <Text value="Item 1" />
  <Text value="Item 2" />
</Row>
```

## Props

<ResponseField name="gap" type="string | number" default="md">
  Space between children. Can be a preset (`xs`, `sm`, `md`, `lg`, `xl`, `2xl`) or a number.
</ResponseField>

<ResponseField name="align" type="string" default="center">
  Vertical alignment of children: `flex-start`, `center`, `flex-end`, `stretch`, `baseline`.
</ResponseField>

<ResponseField name="justify" type="string" default="flex-start">
  Horizontal alignment of children: `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.
</ResponseField>

<ResponseField name="wrap" type="boolean" default="false">
  Whether children should wrap to the next line.
</ResponseField>

<ResponseField name="padding" type="string | number | object">
  Padding around the row content. Can be a preset, number, or object `{ x, y, top, ... }`.
</ResponseField>

<ResponseField name="flex" type="number">
  Flex grow factor when inside another flex container.
</ResponseField>

## Examples

### Alignment

```jsx theme={null}
<Row justify="space-between" align="center" padding="md">
  <Text value="Left" />
  <Text value="Right" />
</Row>
```

### Wrapping

```jsx theme={null}
<Row wrap gap="sm">
  <Badge label="Tag 1" />
  <Badge label="Tag 2" />
  <Badge label="Tag 3" />
</Row>
```