Wrap
Wrap is a component that has wrap set on Flex. It inherits convenient style shorthand from Flex.
<Wrap gap="md">
{Array.from({ length: 20 }).map((_, index) => (
<Box key={index} bg="bg.contrast" color="fg.contrast" p="md">
Box
</Box>
))}
</Wrap>
Usage
import { Wrap } from "@yamada-ui/react"
import { Wrap } from "@/components/ui"
import { Wrap } from "@workspaces/ui"
<Wrap />
Props
Similar Components
Bleed
Bleed is a component used to extend elements beyond the boundaries of a container.
Box
Box is the most abstract component on which all other components are built. By default, it renders a div element.
Center
Center is a component that aligns the child elements in the center within the component.
Container
Container is a component used as a general division element. By default, it renders the section element.
Flex
Flex is a component that sets flex to Box. Also, convenient style shorthand is available.
Float
Float is a component used to fix elements to the edges of a container.
Grid
Grid is a component for managing grid layouts. It also comes with handy style shorthand.
Group
Group is a component that groups and attaches multiple elements together.