Row

Install

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

Example

<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.

align

Type: "start" | "center" | "end" | "stretch" | "baseline"

Default: "center"

Where the children sit up and down the Row. baseline lines up their text.

as

Type: "form" | "div" | "aside" | "fieldset" | "footer" | "header" | "main" | "nav" | "ol" | "section" | "ul"

Default: "div"

The element to render. A ul or ol loses its bullets and indent, a fieldset its border.

children

Type: ReactNode

The children, laid out side by side in writing direction.

className

Type: 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

Type: "sm" | "md" | "lg" | "xl" | "xs" | "none"

Default: "sm"

Space between the children: xs 4px, sm 8px, md 16px, lg 24px, xl 32px.

justify

Type: "start" | "center" | "end" | "between"

Default: "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

Type: Ref<HTMLElement>

Reaches the rendered element.

stackBelow

Type: "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

Type: 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.