Bento Grid

Responsive masonry-style grid layout with staggered scroll-reveal entrance, hover border glow, and icon scale animations per cell.

npx uniqueui add bento-grid

Preview

Beautiful animations

Every interaction is crafted with spring-physics Motion.dev animations for a premium feel.

Explore components →

Lightning fast

Copy-paste components with zero runtime overhead.

Type-safe props

Fully typed with TypeScript for confidence at scale.

Zero lock-in

You own the code. No external runtime dependency.

Get started →

Usage

import { BentoGrid, BentoCard } from "@/components/ui/bento-grid";
import { Sparkles, Zap, Shield, Globe } from "lucide-react";

export default function Example() {
  return (
    <div className="p-8 w-full">
      <BentoGrid>
        <BentoCard
          icon={<Sparkles className="w-5 h-5" />}
          title="Beautiful animations"
          description="Every interaction is crafted with spring-physics Motion.dev animations."
          cta="Explore components"
          className="col-span-2"
          spinBorder
          spinBorderColors={["#E2CBFF", "#393BB2"]}
        />
        <BentoCard
          icon={<Zap className="w-5 h-5" />}
          title="Lightning fast"
          description="Copy-paste components with zero runtime overhead."
          spinBorder
          spinBorderColors={["#a3e635", "#065f46"]}
        />
        <BentoCard
          icon={<Shield className="w-5 h-5" />}
          title="Type-safe props"
          description="Fully typed with TypeScript for confidence at scale."
          spinBorder
          spinBorderColors={["#67e8f9", "#1e3a5f"]}
        />
        <BentoCard
          icon={<Globe className="w-5 h-5" />}
          title="Zero lock-in"
          description="You own the code. No external runtime dependency."
          cta="Get started"
          className="col-span-2"
          spinBorder
          spinBorderColors={["#fda4af", "#9f1239"]}
        />
      </BentoGrid>
    </div>
  );
}

Props

Prop	Type	Description
`title`	`string`	Headline text displayed at the bottom of the card.
`description`	`string`	Supporting body text shown beneath the title.
`icon`	`React.ReactNode`	Icon element rendered inside a pill at the top of the card.
`background`	`React.ReactNode`	Optional decorative layer (image, gradient, SVG) rendered behind the content.
`cta`	`string`	Call-to-action label that slides up into view on hover.
`href`	`string`	When supplied the card renders as an anchor element.
`className`	`string`	Grid span and sizing classes forwarded to the cell wrapper, e.g. col-span-2 or row-span-2.
`spinBorder`	`boolean`	Enable the spinning conic-gradient border effect (same technique as the hero button). Replaces the static border.
`spinBorderColors`	`[string, string]`	Two hex/CSS color values for the conic gradient. Defaults to ["#E2CBFF", "#393BB2"] (purple–indigo).