<!-- Generated by scripts/gen-docs.mts from the JSDoc in registry/. Do not edit; run `pnpm run docs`. -->

# Row

Lays its children out side by side with an even gap, centered up and down. It is layout only: it replaces the `flex items-center gap-2` an agent would otherwise write by hand. `stackBelow="sm"` stacks the children on a phone.

```tsx
import { Row } from "@/components/ouro/stack/row";
```

## Example

```tsx
<Row justify="between">
  <Heading level={2}>Recipes</Heading>
  <Button href="/recipes/new">New recipe</Button>
</Row>
<Row gap="xs" wrap>{tags.map((tag) => <Badge key={tag}>{tag}</Badge>)}</Row>
```

## Use instead when

- Use `Stack` instead for a vertical layout, and `Item` for a row with media, a title, a description and actions.

## Props

Type: `RowProps`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end" \| "stretch" \| "baseline"` | `"center"` | Where the children sit up and down the Row. `baseline` lines up their text. |
| `as` | `"form" \| "div" \| "aside" \| "fieldset" \| "footer" \| "header" \| "main" \| "nav" \| "ol" \| "section" \| "ul"` | `"div"` | The element to render. A `ul` or `ol` loses its bullets and indent, a `fieldset` its border. |
| `children` | `ReactNode` |  | The children, laid out side by side in writing direction. |
| `className` | `string` |  | Layout only: margins, width, grid placement (`mt-4`). Appearance classes warn in development: a Row has no look; use `Card` for a surface. So do the flex classes the props own: use `gap`, `align`, `justify`, `wrap` and `stackBelow`, not `gap-*`, `items-*`, `justify-*`, `flex-wrap` or `max-sm:flex-col`. |
| `gap` | `"sm" \| "md" \| "lg" \| "xl" \| "xs" \| "none"` | `"sm"` | Space between the children: `xs` 4px, `sm` 8px, `md` 16px, `lg` 24px, `xl` 32px. |
| `justify` | `"start" \| "center" \| "end" \| "between"` | `"start"` | Where the children sit along the Row. `between` puts the first at the start and the last at the end, as in a toolbar with a title and actions. |
| `ref` | `Ref<HTMLElement>` |  | Reaches the rendered element. |
| `stackBelow` | `"sm" \| "md"` |  | Below this breakpoint the children stack top to bottom at full width, as a settings row whose actions drop under its text on a phone. `sm` is 640px, `md` 768px. |
| `wrap` | `boolean` |  | Lets the children wrap onto more lines when they don't fit. |

## Native attributes

Also accepts the attributes in React's `HTMLAttributes` (`id`, `aria-*`, event handlers), passed to the rendered element, except those named on this page.

## Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

- `alignItems`: Not a prop. Ouro UI uses `align`: `<Row align="start">`.
- `direction`: Not a prop. Row is horizontal; for a vertical layout use `<Stack>`.
- `flexWrap`: Not a prop. Ouro UI uses `wrap`: `<Row wrap>`.
- `justifyContent`: Not a prop. Ouro UI uses `justify`: `<Row justify="between">`.
- `spacing`: Not a prop. Ouro UI uses `gap`: `<Row gap="sm">`.

## `className` is for layout only

Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Your classes always win over Ouro UI's: Row merges `className` last with `cn` (tailwind-merge), so a class that conflicts with its own replaces it.[^layout-classes]

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn.

Alignment classes (`text-center`) warn too: use the `align` prop.

[^layout-classes]: test:registry/ouro/components/ouro/stack/row.test.tsx::Row > passes HTML attributes and a ref through, and lets layout classes win verify:testExists(registry/ouro/components/ouro/stack/row.test.tsx::Row > passes HTML attributes and a ref through, and lets layout classes win)