Row

Horizontal layout primitive. Flows children on the X axis with shared gap, cross-axis alignment, main-axis distribution, and optional wrapping.

Installation

import { Row } from "@gradeui/ui"

Usage

Reach for Row instead of flex items-center gap-* so alignment and spacing stay editable in the settings panel. Common cases — button groups, inline form rows, logo + nav rows.

Gap

Horizontal spacing between children. Shares the same scale as Stack.

gap="xs"

gap="md" (default)

gap="xl"

Justify

Main-axis distribution — how children spread along the horizontal axis.

justify="start" (default)

justify="center"

justify="end"

justify="between"

justify="around"

justify="evenly"

Align

Cross-axis alignment — how children sit vertically within the Row. Default is center.

align="start"

Short

Tall

Short

align="center" (default)

Short

Tall

Short

align="end"

Short

Tall

Short

align="stretch"

Short

Med

Short

align="baseline"

smallmediumLARGE

Wrap

Let children flow onto additional lines when they overflow. Useful for tag/badge lists or filter chips.

design

systems

tokens

layout

primitives

composition

a11y

OKLCH

Composition

Pair justify="between" with a Row for the classic "logo on the left, actions on the right" layout.

Acme

Props

Prop	Type	Default	Description
gap	"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"	"md"	Horizontal gap between children.
align	"start" \| "center" \| "end" \| "stretch" \| "baseline"	"center"	Cross-axis (vertical) alignment of children. Defaults to center — matches what most real rows want (icon + text, centred button groups).
justify	"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"	"start"	Main-axis distribution along the horizontal axis.
wrap	boolean	false	Allow children to wrap onto additional lines when they overflow.
asChild	boolean	false	Render as the single child element via Radix Slot — stamps Row's layout classes onto an existing semantic tag.
className	string	—	Extra classes merged onto the root element.

When to use

Button groups, inline form rows, logo + nav rows, anything on one line.
For an explicit pane ratio (sidebar + content, 1/3 + 2/3) reach for a Split primitive (coming soon). Row evenly flows whatever children it holds; Split enforces the ratio.
For a vertical composition, reach for Stack instead.

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/row.md and shipped inside the published @gradeui/ui tarball.

---
name: Row
import: "@gradeui/ui"
role: layout
props:
  - gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" (default "md") — gap between children
  - align?: "start" | "center" | "end" | "stretch" | "baseline" (default "center") — cross-axis (vertical) alignment
  - justify?: "start" | "center" | "end" | "between" | "around" | "evenly" (default "start") — main-axis distribution
  - wrap?: boolean (default false) — allow children to wrap onto additional lines when they overflow
  - asChild?: boolean (default false) — render as the child element via Slot
  - className?: string
  - children: React.ReactNode
when_to_use: Horizontal composition — button groups, inline form rows, logo + nav rows, anything on one line. Reach for Row instead of `flex items-center gap-*` so the alignment and spacing are editable through the settings panel. For two-pane layouts with an explicit ratio (sidebar + content, 1/3 + 2/3) use Split instead — Row evenly flows whatever children it holds.
composes_with: [Button, Input, NavItem, Stack (can wrap a Row), any content component]
aliases: [row, hstack, horizontal, inline, horizontal layout, hstack, h-stack, horizontal stack, lazyhstack]
---

```jsx
// Button group — justify="end" pushes the group to the right.
<Row gap="sm" justify="end">
  <Button variant="ghost">Cancel</Button>
  <Button>Save</Button>
</Row>
```

```jsx
// Spread apart — logo left, action right.
<Row justify="between" align="center">
  <Logo />
  <Button>Sign in</Button>
</Row>
```

Stack

Grid