---
title: Row
description: Horizontal flex container for arranging children side-by-side.
icon: table-rows
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

Row arranges children horizontally with flexbox. Use `gap` to control spacing between items.

## Basic Usage

<ComponentPreview json={{"view":{"cssClass":"gap-4","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgRGl2LAogICAgUm93LAopCgp3aXRoIFJvdyhnYXA9NCk6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCg==">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Div,
    Row,
)

with Row(gap=4):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Gap

Gap controls the spacing between children. Larger values give more visual separation.

<Tabs>
<Tab title="gap=4">
<ComponentPreview json={{"view":{"cssClass":"gap-4 p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD00LCBjc3NfY2xhc3M9InAtMyBib3JkZXItMyBib3JkZXItZGFzaGVkIik6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCg==">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=4, css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4 p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title="gap=8">
<ComponentPreview json={{"view":{"cssClass":"gap-8 p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD04LCBjc3NfY2xhc3M9InAtMyBib3JkZXItMyBib3JkZXItZGFzaGVkIik6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCg==">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=8, css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-8 p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title="gap=12">
<ComponentPreview json={{"view":{"cssClass":"gap-12 p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD0xMiwgY3NzX2NsYXNzPSJwLTMgYm9yZGVyLTMgYm9yZGVyLWRhc2hlZCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQo=">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=12, css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-12 p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
</Tabs>

## Alignment

`align` controls vertical alignment of children. The difference is visible when children have different heights.

<Tabs>
<Tab title='align="start"'>
<ComponentPreview json={{"view":{"cssClass":"gap-4 items-start p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-8 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-16 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD00LCBhbGlnbj0ic3RhcnQiLCBjc3NfY2xhc3M9InAtMyBib3JkZXItMyBib3JkZXItZGFzaGVkIik6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtOCB3LTIwIikKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC0xNiB3LTIwIikKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC0xMCB3LTIwIikK">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=4, align="start", css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-8 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-16 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4 items-start p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-8 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-16 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title='align="center"'>
<ComponentPreview json={{"view":{"cssClass":"gap-4 items-center p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-8 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-16 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD00LCBhbGlnbj0iY2VudGVyIiwgY3NzX2NsYXNzPSJwLTMgYm9yZGVyLTMgYm9yZGVyLWRhc2hlZCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTggdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTYgdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCg==">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=4, align="center", css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-8 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-16 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4 items-center p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-8 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-16 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title='align="end"'>
<ComponentPreview json={{"view":{"cssClass":"gap-4 items-end p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-8 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-16 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD00LCBhbGlnbj0iZW5kIiwgY3NzX2NsYXNzPSJwLTMgYm9yZGVyLTMgYm9yZGVyLWRhc2hlZCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTggdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTYgdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCg==">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=4, align="end", css_class="p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-8 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-16 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4 items-end p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-8 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-16 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title='align="baseline"'>
Baseline aligns children along the invisible line that text sits on. Unlike `center`, which vertically centers boxes, `baseline` makes text of different sizes read naturally — as if on the same line of a page.

<ComponentPreview json={{"view":{"cssClass":"gap-4 items-baseline p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md px-3 py-1 text-white text-sm","type":"Span","content":"Small"},{"cssClass":"bg-emerald-500 rounded-md px-3 py-2 text-white text-2xl","type":"Span","content":"Large"},{"cssClass":"bg-emerald-500 rounded-md px-3 py-1 text-white text-base","type":"Span","content":"Medium"}]}}} playground=" ">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Row, Span

with Row(gap=4, align="baseline", css_class="p-3 border-3 border-dashed"):
    Span(
        "Small",
        css_class="bg-emerald-500 rounded-md "
        "px-3 py-1 text-white text-sm",
    )
    Span(
        "Large",
        css_class="bg-emerald-500 rounded-md "
        "px-3 py-2 text-white text-2xl",
    )
    Span(
        "Medium",
        css_class="bg-emerald-500 rounded-md "
        "px-3 py-1 text-white text-base",
    )
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-4 items-baseline p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {
        "cssClass": "bg-emerald-500 rounded-md px-3 py-1 text-white text-sm",
        "type": "Span",
        "content": "Small"
      },
      {
        "cssClass": "bg-emerald-500 rounded-md px-3 py-2 text-white text-2xl",
        "type": "Span",
        "content": "Large"
      },
      {
        "cssClass": "bg-emerald-500 rounded-md px-3 py-1 text-white text-base",
        "type": "Span",
        "content": "Medium"
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
</Tabs>

## Justification

`justify` controls how children are distributed along the horizontal axis.

<Tabs>
<Tab title='justify="start"'>
<ComponentPreview json={{"view":{"cssClass":"gap-1 justify-start w-full p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD0xLCBqdXN0aWZ5PSJzdGFydCIsIGNzc19jbGFzcz0idy1mdWxsIHAtMyBib3JkZXItMyBib3JkZXItZGFzaGVkIik6CiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCiAgICBEaXYoY3NzX2NsYXNzPSJiZy1lbWVyYWxkLTUwMCByb3VuZGVkLW1kIGgtMTAgdy0yMCIpCg==">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=1, justify="start", css_class="w-full p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-1 justify-start w-full p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title='justify="center"'>
<ComponentPreview json={{"view":{"cssClass":"gap-1 justify-center w-full p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD0xLCBqdXN0aWZ5PSJjZW50ZXIiLCBjc3NfY2xhc3M9InctZnVsbCBwLTMgYm9yZGVyLTMgYm9yZGVyLWRhc2hlZCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQo=">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=1, justify="center", css_class="w-full p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-1 justify-center w-full p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title='justify="end"'>
<ComponentPreview json={{"view":{"cssClass":"gap-1 justify-end w-full p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD0xLCBqdXN0aWZ5PSJlbmQiLCBjc3NfY2xhc3M9InctZnVsbCBwLTMgYm9yZGVyLTMgYm9yZGVyLWRhc2hlZCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQo=">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=1, justify="end", css_class="w-full p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-1 justify-end w-full p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title='justify="between"'>
<ComponentPreview json={{"view":{"cssClass":"gap-1 justify-between w-full p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD0xLCBqdXN0aWZ5PSJiZXR3ZWVuIiwgY3NzX2NsYXNzPSJ3LWZ1bGwgcC0zIGJvcmRlci0zIGJvcmRlci1kYXNoZWQiKToKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC0xMCB3LTIwIikKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC0xMCB3LTIwIikKICAgIERpdihjc3NfY2xhc3M9ImJnLWVtZXJhbGQtNTAwIHJvdW5kZWQtbWQgaC0xMCB3LTIwIikK">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=1, justify="between", css_class="w-full p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-1 justify-between w-full p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title='justify="around"'>
<ComponentPreview json={{"view":{"cssClass":"gap-1 justify-around w-full p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD0xLCBqdXN0aWZ5PSJhcm91bmQiLCBjc3NfY2xhc3M9InctZnVsbCBwLTMgYm9yZGVyLTMgYm9yZGVyLWRhc2hlZCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQo=">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=1, justify="around", css_class="w-full p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-1 justify-around w-full p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
<Tab title='justify="evenly"'>
<ComponentPreview json={{"view":{"cssClass":"gap-1 justify-evenly w-full p-3 border-3 border-dashed","type":"Row","children":[{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"},{"cssClass":"bg-emerald-500 rounded-md h-10 w-20","type":"Div"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgRGl2LCBSb3cKCndpdGggUm93KGdhcD0xLCBqdXN0aWZ5PSJldmVubHkiLCBjc3NfY2xhc3M9InctZnVsbCBwLTMgYm9yZGVyLTMgYm9yZGVyLWRhc2hlZCIpOgogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQogICAgRGl2KGNzc19jbGFzcz0iYmctZW1lcmFsZC01MDAgcm91bmRlZC1tZCBoLTEwIHctMjAiKQo=">
<CodeGroup>
```python Python highlight={3} icon="python"
from prefab_ui.components import Div, Row

with Row(gap=1, justify="evenly", css_class="w-full p-3 border-3 border-dashed"):
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
    Div(css_class="bg-emerald-500 rounded-md h-10 w-20")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-1 justify-evenly w-full p-3 border-3 border-dashed",
    "type": "Row",
    "children": [
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"},
      {"cssClass": "bg-emerald-500 rounded-md h-10 w-20", "type": "Div"}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>
</Tab>
</Tabs>

## API Reference

<Card icon="code" title="Row Parameters">
<ParamField body="gap" type="int | tuple | Responsive | None" default="None">
  Gap between children. An int maps to `gap-{n}`. A tuple `(x, y)` sets per-axis gaps; use `None` to skip an axis. A `Responsive()` sets different gaps at different breakpoints.
</ParamField>

<ParamField body="align" type="str | None" default="None">
  Cross-axis alignment: `"start"`, `"center"`, `"end"`, `"stretch"`, `"baseline"`.
</ParamField>

<ParamField body="justify" type="str | None" default="None">
  Main-axis distribution: `"start"`, `"center"`, `"end"`, `"between"`, `"around"`, `"evenly"`, `"stretch"`.
</ParamField>

<ParamField body="css_class" type="str | Responsive | None" default="None">
  Additional Tailwind CSS classes. A `Responsive()` compiles breakpoint-prefixed classes.
</ParamField>
</Card>

## Protocol Reference

```json Row
{
  "type": "Row",
  "children?": "[Component]",
  "let?": "object",
  "gap?": "number | Action[]",
  "align?": "start | center | end | stretch | baseline",
  "justify?": "start | center | end | between | around | evenly | stretch",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Row](/protocol/row).
