---
title: Wrap
description: "`Wrap` is a component that has `wrap` set on `Flex`. It inherits convenient style shorthand from `Flex`."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/wrap/wrap.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/wrap
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-wrap--basic
---

```tsx
<Wrap gap="md">
  {Array.from({ length: 20 }).map((_, index) => (
    <Box key={index} bg="bg.contrast" color="fg.contrast" p="md">
      Box
    </Box>
  ))}
</Wrap>
```

## Usage

```tsx
import { Wrap } from "@yamada-ui/react"
```

```tsx
import { Wrap } from "@/components/ui"
```

```tsx
import { Wrap } from "@workspaces/ui"
```

```tsx
<Wrap />
```

## Props

| Prop          | Default | Type                                                                                                                                                 | Description                                |
| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                                                 | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                                            | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                                           | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                            | Set color scheme variables.                |
| `align`       | -       | `"-moz-initial" \| "baseline" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "normal" \| "revert-layer" ...`        | The CSS `align-items` property.            |
| `basis`       | -       | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-auto" \| "0.5" \| "1.5" \| "1" \| "1/12" \| "1/2" ...` | The CSS `flex-basis` property.             |
| `direction`   | -       | `"-moz-initial" \| "column-reverse" \| "column" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "row-reverse" \| "row" \| "unset" ...`    | The CSS `flex-direction` property.         |
| `grow`        | -       | `"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`                                               | The CSS `flex-grow` property.              |
| `justify`     | -       | `"-moz-initial" \| "center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "left" \| "normal" \| "revert-layer" ...`            | The CSS `justify-content` property.        |
| `shrink`      | -       | `"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`                                               | The CSS `flex-shrink` property.            |
| `wrap`        | -       | `"-moz-initial" \| "inherit" \| "initial" \| "nowrap" \| "revert-layer" \| "revert" \| "unset" \| "wrap-reverse" \| "wrap" ...`                      | The CSS `flex-wrap` property.              |