Features Masonry Grid

Masonry-style feature layout with varying card heights for visually dynamic Next.js product showcases

Break away from uniform grids with a masonry-style feature layout where cards have varying heights based on content. Short features sit compactly while detailed ones expand naturally, creating an organic, Pinterest-inspired flow for landing pages and product marketing sections.

Features Masonry Grid preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/features-masonry-grid.json

npx shadcn@latest add https://www.shadcn.io/r/features-masonry-grid.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/features-masonry-grid.json

bunx shadcn@latest add https://www.shadcn.io/r/features-masonry-grid.json

Features Bento Grid

Asymmetric grid

Features Three Column Grid

3-column grid

Features Two Column Grid

2-column grid

Features Dark Cards

Dark background cards

Features Icon Grid

Connected icon grid

Features Four Column Grid

4-column grid

FAQ

Last updated on March 24, 2026

Was this page helpful?

Features Keyboard Shortcuts

A keyboard shortcut reference guide with kbd-styled key combinations and grouped categories

Features Matrix Layout

Feature matrix with checkmarks showing availability across tiers for Next.js pricing and comparison pages

Features Masonry Grid