Bento Grid
A flexible and responsive grid system for showcasing features, similar to Apple's design language.
Bento Grid
BentoGrid is a layout system that allows you to create dense, visually interesting feature grids. It's heavily inspired by modern landing page designs.
How To Use
Import
Import the component into your project.
import { BentoGrid, BentoCard } from '@/components/ui/hatch/bento-grid';Preview
BentoCard Props
| Prop | Type | Default |
|---|---|---|
className? | string | - |
cta | string | - |
href | string | - |
background? | React.ReactNode | - |
Icon | LucideIcon | - |
description | string | - |
name | string | - |
✨ Features
- Fully responsive
- Built-in hover animations
- Clean, Apple-like aesthetics
- Easily customizable with Tailwind CSS
🧠 When to Use
- Use for "Features" sections
- Use for dashboard overviews
- Use when you want to show a lot of information in a compact yet beautiful way