Row

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/row.json

npx shadcn@latest add https://prototyper-ui.com/r/row.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/row.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/row.json

This will add the following files to your project:

• components/ui/row.tsx

Usage

import { Row } from "@/components/ui/row";

<Row gap={4} align="center" justify="between">
  <span>Left</span>
  <span>Right</span>
</Row>

Row is a horizontal flex container with props for gap, align, justify, and wrap. Use it for toolbars, header layouts, button groups, and tag lists.

Examples

Space Between

A common header pattern with logo on the left and navigation on the right.

Centered

Centered button group, useful for dialog footers and form actions.

Wrapping

Wrapping row for tags, badges, or chips that overflow to the next line.

Styling

Data Slots

Use data-slot attributes to target the row in CSS:

Customization Examples

/* Add a bottom border to all rows */
[data-slot="row"] {
  @apply border-b border-border pb-2;
}

<Row className="border-b border-border pb-2" gap={4}>
  Custom styled row
</Row>

API Reference

Row

A horizontal flex container with layout props.

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

Accessibility

Keyboard Interactions

Row is a non-interactive layout container and does not have keyboard interactions.

ARIA Attributes

• Renders as a plain <div> with no implicit ARIA role.
• No additional ARIA attributes are needed for a flex layout container.

Related