Masonry Gallery Layout

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature126.tsx instead.

Usage

The file also exports feature126Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature126, feature126Demo } from "@/components/blocks/feature/feature126";

export default function Page() {
  return <Feature126 {...feature126Demo} />;
}

Props

Types

interface MasonryItem {
  title: string;
  image: { src: string; alt: string };
  href: string;
  aspect: "square" | "portrait" | "tall" | "wide";
}

Behavior notes

• This is a plain Server Component; the staggered look comes entirely from CSS columns/break-inside-avoid plus each item's own aspect field, not from JS measuring layout.
• Each tile's href is a real, functional Link, but points at "#" in the demo props since there's no real destination page to link to.
• The dark gradient overlay and title caption fade in on hover/focus via CSS opacity, no JS state involved.