Bento Grid

npx shadcn@latest add @kokonutui/bento-grid

import BentoGrid from "@/components/kokonutui/bento-grid";

export default function Example() {
  return <BentoGrid />;
}

interface BentoItem {
  id: string;
  title: string;
  description: string;
  href?: string;
  feature?: "chart" | "counter" | "code" | "timeline" | "spotlight" | "icons" | "typing" | "metrics";
  size?: "sm" | "md" | "lg";
  className?: string;
  // Feature-specific props
  spotlightItems?: string[];
  timeline?: Array<{ year: string; event: string }>;
  typingText?: string;
  metrics?: Array<{ label: string; value: number; suffix?: string; color?: string }>;
  statistic?: { value: string; label: string; start?: number; end?: number; suffix?: string };
}

const customItems: BentoItem[] = [
  {
    id: "custom",
    title: "Your Feature",
    description: "Description here",
    feature: "spotlight",
    spotlightItems: ["Item 1", "Item 2", "Item 3"],
    className: "col-span-2"
  }
];