║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Masonry description: A responsive masonry layout component for displaying items in a grid. preview: true links: api: /docs/components/masonry#api-reference

<ComponentTabs name="masonry-demo" scalePreview />

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/masonry"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @radix-ui/react-slot
 ```

</Step> <Step> Copy the refs composition utilities into your `lib/compose-refs.ts` file. <ComponentSource name="compose-refs" /> </Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="masonry" />

</Step> </Steps>

Layout

Import the parts, and compose them together.

import * as Masonry from "@/components/ui/masonry";

<Masonry.Root>
  <Masonry.Item />
</Masonry.Root>

Examples

Linear Layout

Set linear to true to maintain item order from left to right.

<ComponentTabs name="masonry-linear-demo" scalePreview />

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.

<ComponentTabs name="masonry-ssr-demo" scalePreview />

API Reference

Root

The main container component for the masonry layout.

<AutoTypeTable path="./types/docs/masonry.ts" name="RootProps" />

Item

Individual item component within the masonry layout.

<AutoTypeTable path="./types/docs/masonry.ts" name="ItemProps" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║