👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Bento Testimonials
Bento box grid layout with varying card sizes creating visual hierarchy and featured testimonials
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Not all testimonials deserve equal space—some stories are bigger than others. This React bento testimonials layout mixes different card sizes in asymmetric grid creating visual interest and hierarchy. Built with shadcn/ui Card components using CSS Grid with span utilities, featured quotes get prominence while shorter reviews fill gaps—perfect for curated testimonials, showcasing diversity of feedback, or modern designs where asymmetric layouts feel dynamic and intentional versus uniform grids feeling static.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/testimonials-bento-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/testimonials-bento-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/testimonials-bento-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/testimonials-bento-01.jsonRelated blocks you will also like
Masonry Testimonials
Staggered heights Pinterest-style layout
Testimonials Wall
Full grid of all testimonials visible
Grid with Add Card
Grid with add testimonial interaction
Split Testimonial
Split layout with image and quote
Company Testimonials
Featured company testimonial
Testimonials with Cards
Card-based testimonials with verification
