Masonry Grid

A fully responsive, animated masonry layout powered by Framer Motion. It automatically calculates column sizes based on screen width and provides stunning entrance animations with blur effects.

Live Preview

Installation

CLI

npx @modus-ui/cli add masonry-grid

Manual

Copy the code from the component tab.
Create a file at components/ui/masonry-grid.tsx.
Paste the code.

Usage

tsx

import { MasonryGrid } from "@/components/ui/masonry-grid";

export default function Example() {
  const items = [
    { id: 1, height: 300, content: <div className="h-full w-full rounded-xl bg-primary/20" /> },
    { id: 2, height: 200, content: <div className="h-full w-full rounded-xl bg-primary/40" /> },
    { id: 3, height: 400, content: <div className="h-full w-full rounded-xl bg-primary/60" /> },
  ];

  return <MasonryGrid items={items} animateFrom="bottom" stagger={0.05} />;
}

Props

Prop	Type	Default	Description
`items`	`MasonryItem[]`	`[]`	Array of objects containing `id`, `height`, and `content`.
`animateFrom`	`"top" \| "bottom" \| "left" \| "right" \| "center" \| "random"`	`"bottom"`	Direction from which items animate in.
`stagger`	`number`	`0.05`	Delay interval between item animations.

Masonry Grid

Installation

CLI

Manual

Usage

Props

Comments