Back to Components
Cards

Bento Grid

Asymmetric bento layout tiles with ambient glow and shine animations.

Overview

Realtime insights

Track product usage, funnel health, and team velocity in one view.

Automation

Smart workflows

Trigger actions and approvals without manual follow ups.

Security

Guardrails

Maintain compliance with continuous checks.

Ops

Pipeline clarity

Visualize handoffs and momentum across every stage.

Momentum

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.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge