Control
Overview
Monitor everything from a single, elegant panel.
Back to ComponentsView lanes Read insights Review alerts Start flow Browse library
Cards
Interactive Bento Grid
A bento grid that expands and rearranges items on hover.
PropsUsage ExampleVariations
Open overview
Teams
Workstreams
Zoom into active streams and keep them aligned.
Signals
Insights
Surface trends with a short, focused summary.
Monitor
Alerts
Stay ahead with proactive alerts and context.
Flow
Automation
Launch quick automations with a single action.
Assets
Library
Collect every asset in one premium library.
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/interactive-bento-grid.tsx
Installation
Using shadcn CLI
npx shadcn add interactive-bento-grid --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge framer-motionRelated Cards Components
Ambient Glow Card
A feature card with a rotating ambient aura for premium highlights.
Animated Card Hover
Hover tilt card with optional glare and depth effect.
Animated Gradient Border Card
Card with a rotating gradient border for premium emphasis.
Bento Card
Card component for bento grid layouts. Supports multiple sizes (1x1, 2x1, 1x2, 2x2) with optional gradient backgrounds.
Bento Grid
Asymmetric bento layout tiles with ambient glow and shine animations.
Card
Flexible card container with header, content, and footer sections.