Wrap

A flex container that wraps items to multiple lines. Useful for tag lists and button groups.

import { Wrap } from "@ninna-ui/layout"

pnpm add @ninna-ui/layout

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Wrap component.

import { Wrap } from "@ninna-ui/layout";

export default function Example() {
  return (
    <Wrap gap="2">
      <Badge>Tag 1</Badge>
      <Badge>Tag 2</Badge>
      <Badge>Tag 3</Badge>
    </Wrap>
  );
}

Basic

Wrap items that overflow.

ReactTypeScriptTailwindRemixViteNode.jspnpm

Gap Spacing

Control spacing between wrapped items.

gap="0"

Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6

gap="2"

Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6

gap="4"

Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6

gap="6"

Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6

Alignment

Align items on the cross axis.

align="start"

ShortTallMedium

align="center"

ShortTallMedium

align="end"

ShortTallMedium

Justify

Distribute items along the main axis.

justify="start"

ABC

justify="center"

ABC

justify="end"

ABC

justify="between"

ABC

Use Cases

Common patterns using Wrap.

API Reference

Complete list of props.

Props

Prop	Type	Default	Description
`gap`	`'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '8' \| '10' \| '12' \| '16'`	`'4'`	Gap between items
`align`	`'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`	-	Align items on cross axis
`justify`	`'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'`	-	Justify items on main axis
`className`	`string`	-	Additional CSS classes

Accessibility

Wrap is a pure layout component with no semantic meaning
Ideal for tag clouds, filter chips, and responsive button groups
Items maintain their natural order when wrapping