Bento Grid

Responsive masonry-style grid with staggered scroll-reveal, pointer-follow spotlight, hover lift and shadows, optional spin borders, and spring micro-interactions per cell.

UniqueUI CLI

npx uniqueui add bento-grid

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/bento-grid.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Features

Variant 1 of 4

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 →

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>
  );
}

Showcase

Variant 2 of 4

Aurora vibes

Layered animated gradients that feel alive.

View component →

Magnetic pull

Spring-physics cursor attraction.

Spotlight effect

Radial light that follows your mouse.

Meteor storm

Shooting star particles raining through cards.

Try it →

import { BentoGrid, BentoCard } from "@/components/ui/bento-grid";

export default function Example() {
  return (
    <div className="p-8 w-full">
      <BentoGrid>
        <BentoCard
          title="Aurora vibes"
          description="Layered animated gradients that feel alive."
          background={
            <div className="absolute inset-0 bg-gradient-to-br from-violet-700/30 via-fuchsia-600/15 to-cyan-600/20 animate-pulse" />
          }
          cta="View component"
          className="col-span-2"
        />
        <BentoCard
          title="Magnetic pull"
          description="Spring-physics cursor attraction."
          background={
            <div className="absolute inset-0 bg-gradient-to-br from-rose-700/25 to-orange-600/20" />
          }
        />
        <BentoCard
          title="Spotlight effect"
          description="Radial light that follows your mouse."
          background={
            <div className="absolute inset-0 bg-gradient-to-br from-sky-700/25 to-indigo-700/20" />
          }
        />
        <BentoCard
          title="Meteor storm"
          description="Shooting star particles raining through cards."
          background={
            <div className="absolute inset-0 bg-gradient-to-br from-emerald-700/25 to-teal-600/20" />
          }
          cta="Try it"
          className="col-span-2"
        />
      </BentoGrid>
    </div>
  );
}

Stats

Variant 3 of 4

Components

Production-ready animated components

Zero dependencies

No UniqueUI runtime in your bundle

~3s

Install time

Seconds from CLI to working component

MIT License

Open source forever. Fork it, extend it, ship it.

View on GitHub →

✓

Tailwind compatible

v3 and v4 supported

import { BentoGrid, BentoCard } from "@/components/ui/bento-grid";

export default function Example() {
  return (
    <div className="p-8 w-full">
      <BentoGrid className="auto-rows-[160px]">
        <BentoCard
          title="Components"
          description="Production-ready animated components"
          background={
            <div className="absolute top-4 right-4 text-6xl font-black text-white/[0.06] select-none">24</div>
          }
          icon={<span className="text-2xl font-black text-violet-400">24</span>}
        />
        <BentoCard
          title="Zero dependencies"
          description="No UniqueUI runtime in your bundle"
          background={
            <div className="absolute top-4 right-4 text-6xl font-black text-white/[0.06] select-none">0</div>
          }
          icon={<span className="text-2xl font-black text-emerald-400">0</span>}
        />
        <BentoCard
          title="Install time"
          description="Seconds from CLI to working component"
          icon={<span className="text-2xl font-black text-sky-400">~3s</span>}
        />
        <BentoCard
          title="MIT License"
          description="Open source forever. Fork it, extend it, ship it."
          cta="View on GitHub"
          className="col-span-2"
        />
        <BentoCard
          title="Tailwind compatible"
          description="v3 and v4 supported"
          icon={<span className="text-2xl font-black text-cyan-400">✓</span>}
        />
      </BentoGrid>
    </div>
  );
}

Team

Variant 4 of 4

Alex Kim

Lead Engineer

Motion →

Sara Chen

Design Systems

Tailwind →

Jordan Lee

DX Engineer

CLI →

Maya Patel

Animations Lead

Motion.dev →

Ryan Wu

Accessibility

ARIA →

Priya Shah

TypeScript Infra

TS 5.x →

import { BentoGrid, BentoCard } from "@/components/ui/bento-grid";

const members = [
  { name: "Alex Kim",   role: "Lead Engineer",    tag: "Motion",     color: "#a855f7" },
  { name: "Sara Chen",  role: "Design Systems",   tag: "Tailwind",   color: "#6366f1" },
  { name: "Jordan Lee", role: "DX Engineer",      tag: "CLI",        color: "#ec4899" },
  { name: "Maya Patel", role: "Animations Lead",  tag: "Motion.dev", color: "#10b981" },
  { name: "Ryan Wu",    role: "Accessibility",    tag: "ARIA",       color: "#f59e0b" },
  { name: "Priya Shah", role: "TypeScript Infra", tag: "TS 5.x",    color: "#3b82f6" },
];

export default function Example() {
  return (
    <div className="p-8 w-full">
      <BentoGrid className="auto-rows-[180px]">
        {members.map((m) => (
          <BentoCard
            key={m.name}
            title={m.name}
            description={m.role}
            background={
              <div
                className="absolute bottom-0 right-0 w-24 h-24 rounded-tl-full opacity-10"
                style={{ backgroundColor: m.color }}
              />
            }
            icon={
              <div
                className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white"
                style={{ backgroundColor: m.color + "33", border: `1.5px solid ${m.color}66` }}
              >
                {m.name.split(" ").map((n) => n[0]).join("")}
              </div>
            }
            cta={m.tag}
          />
        ))}
      </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).
`interactiveSpotlight`	`boolean`	When true (default), a violet radial highlight follows the pointer inside the card on fine-pointer hover.
`theme`	`"light" \| "dark"`	Surface and text colors; injected by BentoGrid on each child.