Bento Grid
Asymmetric bento layout tiles with ambient glow and shine animations.
Realtime insights
Track product usage, funnel health, and team velocity in one view.
Smart workflows
Trigger actions and approvals without manual follow ups.
Guardrails
Maintain compliance with continuous checks.
Pipeline clarity
Visualize handoffs and momentum across every stage.
Orbit overview
Stay aligned with the pulse of every project.
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/bento-grid.tsx
Installation
Using shadcn CLI
npx shadcn add bento-grid --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated 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.
Card
Flexible card container with header, content, and footer sections.
CTA Banner
A call to action banner with headline, supporting copy, and primary or secondary actions.