Bento Grid

Bento-style grid layout for feature cards.

• Location: sabo/src/components/ui/bento-grid.tsx

By default Bento Grid is a layout pattern. Our implementation only adds light :hover transitions (no autoplay animation).

When to use

• Showcase features in an asymmetric grid with visual interest.
• Combine cards of different heights; add subtle hover motions only.

Usage

sabo/src/components/ui/bento-grid.tsx

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

export function Example() {
  return (
    <BentoGrid className="grid-cols-2 auto-rows-[12rem]">
      <BentoCard
        name="Fast start"
        description="Spin up a project in minutes."
        href="#"
        cta="Learn more"
        Icon={RocketIcon}
        background={<div />}
        className="col-span-2"
      />
      <BentoCard
        name="Secure"
        description="Best practices baked in."
        href="#"
        cta="Docs"
        Icon={RocketIcon}
        background={<div />}
        className=""
      />
    </BentoGrid>
  );
}

Key props

BentoCard.name · string

Card title text.

BentoCard.description · string

Supporting copy below the title.

BentoCard.Icon · React.ElementType

Icon component displayed above the title.

BentoCard.background · ReactNode

Optional decorative background content.

BentoCard.href · string

Link destination for the card’s call-to-action.

BentoCard.cta · string

Text for the call-to-action button.

BentoCard.className · string

Additional CSS classes to apply to the card (e.g., for spanning columns).

Styling tip

• Keep hover effects subtle; avoid autoplaying animations inside cards.
• Ensure link CTA remains visible and accessible on hover.