Analytics & Feature Bento Grids
Break out of the standard grid with asymmetric bento layouts built on shadcn/ui, including a dashboard-style analytics showcase and a services/testimonials grid.
Launch Faster with Complete Templates
Love these blocks? Get our free dashboard and landing page templates with 30+ pre-built pages and all the components you need. Premium templates with advanced features launching soon at $69.
Shadcn UI Bento Grid Layouts
Bento grids trade uniform cards for varied cell sizes, giving the strongest idea more room. The Shadcn UI examples here include an analytics composition, a services-and-testimonials story, and responsive listing grids.
Bento compositions available here
- Bento Grid 1 & 4: a responsive grid of listings.
- Bento Grid 2: a dashboard-style showcase with deployment analytics, team activity, and performance metrics.
- Bento Grid 3: a grid highlighting services, client testimonials, and business achievements.
Use a bento grid when the story is not linear
The dashboard-style variant (2) fits a product landing page that wants to show real functionality at a glance. The services/testimonials grid (3) works well as a compact "why choose us" section paired with a call-to-action section.
Asymmetric grid behavior
Tailwind CSS controls the asymmetric spans and responsive collapse in these React and TypeScript grids. Decide which one or two stories deserve the largest cells before filling the remaining cards.