Shadcn.io is not affiliated with official shadcn/ui
Logos Bento Featured Case Study
A bento featured case study logo block for React and Next.js with a hero-weight featured cell holding a flagship logo plus quote plus metric plus attribution, four content-rich supporting cells each carrying an industry tag and retention metric, a subtle featured border accent, and monochrome-to-color hover states built with shadcn/ui and Tailwind CSS
Frame your single best customer story alongside supporting logos with a bento featured case study block for React and Next.js. Features a three-column two-row bento grid where one tall featured cell holds a size-14 flagship logo with a text-2xl bold wordmark, an industry pill, a text-base leading-relaxed quote with specific numeric tension, a highlighted metric with tabular-nums alignment, an attribution row with avatar initials, and a read-the-story accent link, while four content-rich supporting cells each carry a size-8 logo mark, a text-base font-semibold wordmark, an industry label, and a retention or scale metric on a bordered hover-promotable row. 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 hero-case-study sections, landing pages with one standout customer, and hybrid logos-plus-testimonial moments where hierarchy matters.
Related Components
React Logos Featured Focal Hub Block
A central focal mark with supporting orbit
React Logos Featured Quote Split Block
A single logo paired with a customer quote
React Logos Static Grid Wall Block
A static grid wall of monochrome logos
React Logos Tab Filtered Category Grid Block
A pill-tab filtered logo grid
React Logos Split Headline Logo Grid Block
A split layout with headline and logo grid
React Logos Dark Inset Wall Block
A dark inverted logo wall panel
FAQ
Was this page helpful?
Sign in to leave feedback.
Bento Dark Variant
A dark inverted bento featured case study logo block for React and Next.js with a rounded dark panel containing a tall featured cell plus four content-rich supporting cells, inverted palette throughout, and monochrome icon marks with industry pills built with shadcn/ui and Tailwind CSS
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