Bento Grid System
A production-ready bento grid system component for your Next.js application. Accessible, customizable, and built with modern standards.
Bento Grid System
A modular, highly interactive grid system designed for modern dark-mode interfaces. It features sophisticated hover effects including mouse-following borders, spotlight overlays, and animated laser beams that travel along the grid lines.
Key Interactions
- Mouse-Follow Borders: Borders light up based on cursor proximity.
- Spotlight Overlay: A subtle radial gradient tracks the mouse inside cards.
- Moving Lasers: Animated beams traverse the grid structure.
- Feature Showcases
- Dashboard Layouts
- Portfolio Galleries
- System Status Panels
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content to render inside the grid or card. |
| className | string | - | Additional CSS classes. |
| span | 'sm' | 'md' | 'lg' | 'tall' | 'sm' | Controls the column/row span of the card. |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.