Wrap

A row that wraps onto new lines, for chips, tags and badges.

Stable

Web

iOS

Android

@advui/core

Preview

Code

Shown on the report

Health

Shelter

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

import { Badge, Wrap } from '@advui/core'

<Wrap>
  {tags.map((tag) => <Badge key={tag}>{tag}</Badge>)}
</Wrap>

A Stack with `flexDirection: row`, `flexWrap: wrap` and centered items. It takes the Stack props and View style props.

Prop	Type	Default	Description
`gap`	`SpaceTokens`	`'2'`	Space between items, across and down.
`rowGap`	`SpaceTokens`	—	Space between lines. Defaults to `gap`.
`columnGap`	`SpaceTokens`	—	Space between items on a line. Defaults to `gap`.
`align`	`'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`or a breakpoint map	`'center'`	Alignment of the items on a line. Sets `alignItems`.
`distribute`	`'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'`or a breakpoint map	`'start'`	Where the items sit along each line. Sets `justifyContent`.

Purely visual: Wrap adds no role. Give a set of related controls a role="group" and an aria-label, or a list role="list" with listitem children.
Items wrap in source order, so reading order matches what is seen.

Items wrap to the available width with no breakpoints. align and distribute also take a mobile-first map, as on Stack.

Since v0.9.0Last updated Nov 2, 2026Edit this page on GitHub