Shadcn.io is not affiliated with official shadcn/ui
Testimonials Mosaic
An asymmetric bento testimonials block for React and Next.js with one featured quote cell spanning two columns plus a trio of smaller supporting quotes, built with shadcn/ui and Tailwind CSS
Showcase one hero customer quote alongside three supporting voices with this bento testimonials block for React and Next.js. Features an asymmetric grid where the featured testimonial spans two columns with oversized typography and a size-14 avatar, while three smaller cards fill the supporting cells with tighter padding and size-10 avatars. Built with TypeScript, motion/react staggered entrance animations, and Tailwind CSS theme variables. Perfect for landing page social-proof sections where hierarchy tells the story alongside the quotes themselves.
Related Components
React Testimonials Bento Grid Block
Asymmetric bento grid
React Testimonials Masonry Columns Block
Pinterest-style masonry grid
React Testimonials Compact Card Grid Block
Compact card grid
React Testimonials Three Column Block
Symmetric three-column grid
React Testimonials Marquee Dual Row Block
Dual-row infinite marquee
React Testimonials Featured Hero Block
Featured hero quote
FAQ
Was this page helpful?
Sign in to leave feedback.
Mobile Review
A dark inset featured-quote testimonials block for React and Next.js with inverted color panel, oversized quote typography, credibility star row, and a marketing headline cluster, built with shadcn/ui and Tailwind CSS
Multi Format
An asymmetric bento testimonial layout for React and Next.js with a featured hero quote, a metric highlight tile, and a video thumbnail tile built with shadcn/ui and Tailwind CSS