Shadcn.io is not affiliated with official shadcn/ui
Logos Bento Hybrid Quote Metric
A bento logo block with a featured case study cell plus four supporting cells alternating between quote and metric types for React and Next.js with mixed-shape proof, industry pills, and attribution rows built with shadcn/ui and Tailwind CSS
Frame one flagship story alongside a mix of quote and metric supporting cells with a bento hybrid logo block for React and Next.js. Features a three-column two-row bento grid where a tall featured cell holds a size-14 flagship mark plus quote plus metric plus attribution on the left, while four supporting cells in a two-by-two layout alternate between quote-type cells with short blockquotes and metric-type cells with large tabular-nums figures — each supporting cell carries its own top-and-bottom content clusters so the grid feels deliberate at any viewport. Built with TypeScript, motion/react parent entrance plus staggered per-cell fade with useReducedMotion, Lucide React icon marks paired with five invented placeholder wordmarks, and Tailwind CSS theme variables. Perfect for proof sections that want variety without losing hierarchy, mixed-format case study grids, and landing pages where one flagship anchors a roster of diverse customer shapes.
Related Components
React Logos Bento Featured Case Study Block
A bento grid with one featured case study and four supporting cells
React Logos Bento Three Equal Featured Block
Three equal-weight featured cells in a row
React Logos Bento Wide Featured Top Block
A wide featured cell on top with supporting cells below
React Logos Bento Quote Cards Only Block
A two by two grid of equal quote cards
React Logos Bento Metric Cards Only Block
A three by two grid of equal metric cards
React Logos Featured Quote With Metric Card Block
A featured quote paired with a metric card
FAQ
Was this page helpful?
Sign in to leave feedback.
Bento Five Cell Layout
A variant bento logo block for React and Next.js with a four-column two-row grid, a wide two-by-two featured cell, four single-cell supporting logos with industry pills and metrics, and monochrome-to-color hover states built with shadcn/ui and Tailwind CSS
Bento Metric Cards Only
A bento logo block with six equal-weight metric cards in a three-by-two grid for React and Next.js with icon-topped containers, tabular-nums metrics, descriptive labels, and brand attribution built with shadcn/ui and Tailwind CSS