"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

type BentoSize = "1x1" | "2x1" | "1x2" | "2x2";

export interface BentoCardProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Card title
   */
  title?: string;
  /**
   * Card description
   */
  description?: string;
  /**
   * Size of the card in the bento grid
   * @default "1x1"
   */
  size?: BentoSize;
  /**
   * Enable gradient background
   * @default false
   */
  gradient?: boolean;
  /**
   * Gradient variant when gradient is enabled
   * @default "primary"
   */
  gradientVariant?: "primary" | "secondary" | "mixed";
  /**
   * Icon or visual element to display
   */
  icon?: React.ReactNode;
}

const sizeClasses: Record<BentoSize, string> = {
  "1x1": "col-span-1 row-span-1",
  "2x1": "col-span-2 row-span-1",
  "1x2": "col-span-1 row-span-2",
  "2x2": "col-span-2 row-span-2",
};

const gradientVariants = {
  primary: "bg-[radial-gradient(ellipse_at_top_left,hsl(var(--primary)/0.15),transparent_50%)]",
  secondary:
    "bg-[radial-gradient(ellipse_at_bottom_right,hsl(var(--secondary)/0.15),transparent_50%)]",
  mixed:
    "bg-[linear-gradient(135deg,hsl(var(--primary)/0.1),transparent_40%,hsl(var(--secondary)/0.1))]",
};

export const BentoCard = React.forwardRef<HTMLDivElement, BentoCardProps>(
  (
    {
      className,
      title,
      description,
      size = "1x1",
      gradient = false,
      gradientVariant = "primary",
      icon,
      children,
      ...props
    },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cn(
          "group relative overflow-hidden rounded-2xl border border-border/60 bg-card/50",
          "transition-all duration-300",
          "hover:border-border hover:bg-card/70",
          sizeClasses[size],
          className
        )}
        {...props}
      >
        {/* Gradient overlay */}
        {gradient && (
          <div
            className={cn(
              "pointer-events-none absolute inset-0",
              gradientVariants[gradientVariant]
            )}
          />
        )}

        {/* Hover glow */}
        <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
          <div className="absolute -left-10 -top-10 h-32 w-32 rounded-full bg-primary/10 blur-3xl" />
        </div>

        {/* Content */}
        <div
          className={cn(
            "relative flex h-full flex-col p-6",
            size === "2x2" && "p-8"
          )}
        >
          {icon && (
            <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-muted/50 text-primary transition-colors group-hover:bg-primary/20">
              {icon}
            </div>
          )}

          {(title || description) && (
            <div className="mt-auto space-y-2">
              {title && (
                <h3
                  className={cn(
                    "font-semibold text-foreground transition-colors group-hover:text-primary",
                    size === "2x2" ? "text-xl" : "text-lg"
                  )}
                >
                  {title}
                </h3>
              )}
              {description && (
                <p
                  className={cn(
                    "text-muted-foreground leading-relaxed",
                    size === "2x2" ? "text-base" : "text-sm"
                  )}
                >
                  {description}
                </p>
              )}
            </div>
          )}

          {children}
        </div>
      </div>
    );
  }
);

BentoCard.displayName = "BentoCard";
Bento Card

Analytics

Dashboard

Dependencies

Files

Installation
