Concepts

Application

Buttons

Data display

Disclosure

Feedback

Layout

Media

Navigation

Overlay

Typography

Utilities

Wrap

Used to add space between elements and wraps automatically if there isn't enough space.

Badge 1Badge 2Badge 3

import { Badge, Wrap } from '@chakra-ui/react'

export const WrapBasic = () => (
  <Wrap>
    <Badge>Badge 1</Badge>
    <Badge>Badge 2</Badge>
    <Badge>Badge 3</Badge>
  </Wrap>
)

Usage

By default, Wrap applies display: flex, flex-wrap: wrap, and gap: 8px to its children.

import { Wrap, WrapItem } from '@chakra-ui/react'

<Wrap>
  <div />
  <div />
</Wrap>

Examples

Gap or Spacing

Pass the gap prop to apply a consistent spacing between each child, even if it wraps.

import { Wrap } from '@chakra-ui/react'

import { DecorativeBox } from '../lib/decorative-box'

export const WrapWithGap = () => (
  <Wrap gap="5">
    {Array.from({ length: 10 }).map((_, index) => (
      <DecorativeBox key={index} h="12" w="12" />
    ))}
  </Wrap>
)

Alignment

Pass the align prop to change the alignment of the child along the cross axis.

Box 1

Box 2

Box 3

Box 4

Box 5

import { Center, Wrap, WrapItem } from '@chakra-ui/react'

export const WrapWithAlign = () => (
  <Wrap gap="30px" align="center">
    {Array.from({ length: 5 }).map((_, index) => (
      <WrapItem key={index}>
        <Center w="180px" h="80px" bg="red.muted">
          Box {index + 1}
        </Center>
      </WrapItem>
    ))}
  </Wrap>
)

Justify

Pass the justify prop to change the alignment of the child along the main axis.