Block
Features Bento Grid
An asymmetric bento grid layout for showcasing product features.
Feature layout
An asymmetric bento grid that keeps attention on what matters
Mix large and compact cards to create a natural rhythm. Each card can hold a story, a stat, or a small callout without feeling crowded.
Built for quick scanning across devices
Emphasize the features that matter most
Pair visuals, metrics, and copy in one grid
Product overview
Pull the highest value feature into the spotlight.
Interactive workflows
Measured performance
Client ready output
Insightful reporting
Track what launches move the needle.
Enterprise safe
Security controls built for regulated teams.
Audit trails
SSO and SCIM
Data residency
Modular blocks
Drag pieces into a layout fast.
Instant setup
Start with templates and customize quickly.
Dependencies
- lucide-react
Files
- components/blocks/features-bento-grid.tsx
Installation
Using shadcn CLI
npx shadcn add features-bento-grid --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install lucide-react