Masonry
A responsive masonry layout component for displaying items in a grid.
Installation
pnpm dlx shadcn@latest add @diceui/masonryLayout
Import the parts, and compose them together.
import {
Masonry,
MasonryItem,
} from "@/components/ui/masonry";
return (
<Masonry>
<MasonryItem />
</Masonry>
)Examples
Linear Layout
Set linear to true to maintain item order from left to right.
Server Side Rendering
Use defaultWidth and defaultHeight, and item fallback to render items on the server. This is useful for preventing layout shift and hydration errors.
API Reference
Masonry
The main container component for the masonry layout.
Prop
Type
MasonryItem
Individual item component within the masonry layout.
Prop
Type