Shadcn.io is not affiliated with official shadcn/ui
Hero Bento Grid
An asymmetric bento grid hero for React and Next.js with crosshair image placeholders in varied col-span cells, bold centered headline, announcement pill, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS
Build a bento grid feature showcase hero using this React and Next.js block. Features a centered headline with announcement pill above a six-cell bento layout using varied col-span and row-span sizes to create visual weight and hierarchy, with crosshair image placeholders in every cell signaling where to drop your product screenshots or feature visuals. Each cell includes a small label overlay so designers know what content to place. Built with TypeScript, the ShadcnioButton component, motion/react staggered entrance animations, Lucide React icons, and Tailwind CSS grid utilities. Perfect for multi-feature SaaS platforms, design tool landing pages, developer dashboards, and any product with several distinct views that deserve individual spotlight.
Related Components
React Feature Cards Hero Block
React hero with feature cards grid using shadcn/ui Card components
React Floating Cards Hero Block
React hero with floating card elements and motion/react animations
React Integration Grid Hero Block
React hero showcasing integration logos in a responsive grid
React Interactive Cards Hero Block
React hero with interactive hoverable cards and animations
React Stacked Cards Hero Block
React hero with stacked card layout and depth effects
React Tabs Hero Block
React hero with tabbed content panels built with shadcn/ui Tabs
FAQ
Was this page helpful?
Sign in to leave feedback.
Before After Slider
A dark-themed hero for React and Next.js with a full-width draggable before/after comparison, pointer-driven slider, stats bar, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS
Bento Mixed Widgets
A bento grid hero with asymmetric mixed widgets for React and Next.js featuring a headline tile, animated NumberFlow stat, avatar proof, sparkline chart, and testimonial tile built with shadcn/ui and Tailwind CSS