Skip to main content
ninna-ui
On this page

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@latest
Includes @ninna-ui/core. CSS setup required.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.

Live preview
ReactTypeScriptTailwindRemixViteNode.jspnpm

Gap Spacing

Control spacing between wrapped items.

Live preview

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.

Live preview

align="start"

ShortTallMedium

align="center"

ShortTallMedium

align="end"

ShortTallMedium

Justify

Distribute items along the main axis.

Live preview

justify="start"

ABC

justify="center"

ABC

justify="end"

ABC

justify="between"

ABC

Use Cases

Common patterns using Wrap.

Live preview

Tag Cloud

ReactTypeScriptTailwindNode.jsGraphQLNext.jsRemixVite

Filter Chips

Avatar Group

A
B
C
D
E
F
G
H

API Reference

Complete list of props.

Props

PropTypeDefaultDescription
asElementType—Semantic HTML element to render
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
classNamestring—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