Skip to main content
  • 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.