Wrap

Wrap is a layout component that adds a defined space between its children. It 'wraps' its children automatically if there isn't enough space to fit any child.

Think of it as a smarter flex-wrap with spacing support. It works really well with things like dialog buttons, tags, and chips.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.
Ads via Chakra UI

Import#

import { Wrap, WrapItem } from "@chakra-ui/react"
  • Wrap: Wrap composes the Box component and renders a <ul> tag
  • WrapItem: WrapItem composes the Box component and renders the HTML <li> tag

Usage#

In the example below, you see that the last Box wrapped to the next line.

  • Box 1
  • Box 2
  • Box 3
  • Box 4
Editable Example

Change the spacing#

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

Pro Tip: You can pass responsive values for the spacing.

  • Box 1
  • Box 2
  • Box 3
  • Box 4
  • Box 5
Editable Example

Change the 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
Editable Example

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

  • Box 1
  • Box 2
  • Box 3
  • Box 4
  • Box 5
Editable Example

Props#

Wrap Props#

Wrap extends Box, so you can pass all Box props in addition to these:

NameTypeDescriptionDefault
alignSystemProps["alignItems"]The `align-items` value (for main axis alignment)-
directionSystemProps["flexDirection"]The `flex-direction` value-
justifySystemProps["justifyContent"]The `justify-content` value (for cross-axis alignment)-
shouldWrapChildrenbooleanIf `true`, the children will be wrapped in a `WrapItem`-
spacingSystemProps["margin"]The space between the each child (even if it wraps)-

WrapItem Props#

WrapItem composes the Box component.

Edit this page