Bento Grid

Features 182

About

A bento grid of cards with a feature card and smaller cards below. Minimal design and dotted backgrounds.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bento Grid to your project and fits it to your theme.

Code

How Bento Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Casestudy5 } from "@/components/ui/casestudy-5";

const DemoOne = () => {
  return (
    <Casestudy5 featuredCasestudy={{
      logo: "https://cdn.21st.dev/assets/mirror/06/067c72836298829da27d230af61c2b4be0e09da5103dc2789639d18beea789f4.svg",
      company: "Acme",
      tags: "ARTIFICIAL INTELLIGENCE / ENTERPRISE SOLUTIONS",
      title: "Workflow Automation for the Digital Age.",
      subtitle: "How to automate your workflow with AI.",
      image: "https://cdn.21st.dev/assets/mirror/9f/9fb9487617e0903ab5bb8012f11530f61a39e4f1f19f169a87a367887fdaeecb.svg",
      link: "https://shadcnblocks.com",
    }}
    casestudies={[
      {
        logo: "https://cdn.21st.dev/assets/mirror/04/042e0245f463452963c1dbc884a3734ac2dd7deb38af2e61e82cb6e1c72b7b8c.svg",
        company: "Super",
        tags: "DATA MIGRATION / SOFTWARE SOLUTIONS",
        title: "Enhance data migration with AI.",
        subtitle: "A data migration platform toward a data-driven future.",
        image: "",
        link: "https://shadcnblocks.com",
      },
      {
        logo: "https://cdn.21st.dev/assets/mirror/42/426d79d413ab59fb7ab7d4da1a2385f246f19a5e303a32bef273316549355ec2.svg",
        company: "Advent",
        tags: "ARTIFICIAL INTELLIGENCE / DATA SOLUTIONS",
        title: "Strategic AI for a future-proof business.",
        subtitle: "Mastering AI for more efficient operations.",
        image: "",
        link: "https://shadcnblocks.com",
      },
    ]}
     />
  );
};

export { DemoOne };