Bento Grid

A flexible bento grid layout component with animated cards.

Configuring your account...

Please wait while we prepare everything for you

Usage

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

export function BentoDemo() {
  return (
    <BentoGrid>
      <BentoCard
        name="Save your files"
        className="col-span-3 lg:col-span-1"
        background={<div className="bg-gradient-to-br from-blue-500 to-purple-600" />}
        Icon={FileTextIcon}
        description="We automatically save your files as you type."
        href="#"
        cta="Learn more"
      />
    </BentoGrid>
  );
}