👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Masonry Testimonials
Masonry layout testimonials with staggered heights for varied quote lengths and dynamic Pinterest-style grid
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Not all testimonials are equal length—why force them into uniform boxes? This React masonry testimonials layout displays customer quotes in Pinterest-style columns with natural heights based on content. Built with shadcn/ui Card components using CSS column layout, shorter quotes sit compact while longer stories breathe—perfect for user-generated content, diverse feedback, or authentic testimonials where forcing uniform card heights crops meaningful content and wastes white space.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/testimonials-masonry-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/testimonials-masonry-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/testimonials-masonry-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/testimonials-masonry-01.jsonRelated blocks you will also like
Testimonials Wall
Full grid of all testimonials visible
Grid with Add Card
Grid with add testimonial interaction
Bento Testimonials
Bento box layout with varied sizes
Testimonials with Cards
Card-based testimonials with verification
Simple Testimonials
Minimalist testimonial layout
Testimonials with Stats
Stats header with testimonials
