Bento Grid 1

Next

Bento-style grid with 3 bold sections, crafted for dark themes. Ideal for showcasing app features or product highlights.

Docs
solaceuiblock

Preview

Loading preview…
app/sections/bento-grid/bento-grid-1.tsx
import {
  BentoGrid,
  BentoItem,
  ChatMessaging,
  CompanyLogos,
} from "@/components/section-components/bento-grid-template-one";

export function BentoGridOne() {
  const items: BentoItem[] = [
    {
      id: "1",
      type: "feature",
      title: "World-Class Information Design",
      description:
        "Transform complex data into crisp visuals that quickly tell your story.",
      image:
        "https://res.cloudinary.com/harshitproject/image/upload/v1746774246/hero-video.jpg",
    },
    {
      id: "2",
      type: "chat",
      content: <ChatMessaging />,
    },
    {
      id: "3",
      type: "partners",
      title: "Connected Everywhere",
      description:
        "Embed your work seamlessly across your favorite platforms for instant sharing.",
      content: <CompanyLogos />,
    },
  ];

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4 md:p-24 ">
      <BentoGrid items={items} />
    </main>
  );
}

Installation

npx shadcn@latest add @solaceui/bento-grid-1

Usage

import { BentoGrid1 } from "@/components/bento-grid-1"
<BentoGrid1 />