Layout primitivesFlex

Row.

Row arranges children left to right and gives you the decisions that matter on a horizontal axis: alignment, distribution, and whether the line may wrap.

TypeScriptRenders div.flex.flex-rowAccepts native props

When to reach for it

Usage

Row is a thin wrapper over Tailwind utilities, so it costs nothing at runtime and composes with every other primitive.

  • Toolbars, headers, and footers that pair a title with actions.
  • Inline metadata such as avatars, labels, and status chips.
  • Tag clouds or chip lists that need to wrap on narrow screens.
Import
import { Row } from "@/components/ui/row";

In practice

Examples

Each example is a real composition with shadcn components. Switch to the Code tab for the source, or copy it directly.

List toolbar

A Row with justify="between" holds two inner Rows. The outer wrap keeps both groups usable on narrow screens.

Inline metadata

Mixed-height children, such as an avatar beside text and a badge, line up on their vertical centers by default.

Jonas LindqvistMaintainer· edited 2 hours ago

Wrapping chips

With wrap enabled the gap applies between lines as well as between items.

Design systemsAccessibilityReact 19Tailwind CSSGrid layoutTypographyDark modeInternationalizationPerformanceTesting

Alignment and distribution

Combine justify and align to see how each maps onto the row.

Playground
One
Two
Three
Justify
Align

Reference

Props

Every primitive also accepts the native props of its element, including className, children, ref, and data attributes.

PropTypeDefault
gap

Space between children.

Responsive<0 | 1 | 2 | 3 | 4 | 6 | 8 | 12>4
align

Cross-axis (vertical) alignment, mapped to the items-* utilities.

Responsive<"start" | "center" | "end" | "stretch" | "baseline">"center"
justify

Main-axis (horizontal) distribution, mapped to the justify-* utilities.

Responsive<"start" | "center" | "end" | "between" | "around" | "evenly">"start"
wrap

Allow children to flow onto additional lines.

booleanfalse

Good to know

Notes

  • Row centers children vertically by default. Use align="start" when children have different heights and should share a top edge.
  • Wrap a child in Col when it should grow into the remaining width or keep its intrinsic size.
  • Responsive props take a single value or a map of base, sm, md, lg, xl, and 2xl. Breakpoints use Tailwind defaults: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px.