Shop by Brand Grid

Cards 19

About

A grid of brand logo cards with product counts and hover effects that link out to each brand's page, used for multi-brand e-commerce brand discovery sections.

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

Code

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

Usage.tsx

import Ecommerce32 from "@/components/ui/ecommerce32";

export default function Ecommerce32Demo() {
  return (
    <Ecommerce32
      badge={{ label: "Brands", variant: "secondary" }}
      heading="Shop by Brand"
      description="Discover your favorite brands all in one place"
      productCountLabel="products"
      brands={[
        {
          name: "Nike",
          logo: "https://cdn.21st.dev/assets/localized/25c1a531576ebf955657b3e926b62a5da994292f6429a56bf8700021871b993d.png",
          href: "https://beste.co",
          productCount: 342,
        },
        {
          name: "Adidas",
          logo: "https://cdn.21st.dev/assets/localized/f6213d396bec055b075ee6cdc461d8ced5e086cb2411e2aa4e260b8b5135c22c.png",
          href: "https://beste.co",
          productCount: 287,
        },
        {
          name: "Puma",
          logo: "https://cdn.21st.dev/assets/localized/8fc20985c7b88bfbc6abc29ece54dc3355fad2281d76af039ea5ef3ffe8bedf3.png",
          href: "https://beste.co",
          productCount: 198,
        },
        {
          name: "New Balance",
          logo: "https://cdn.21st.dev/assets/localized/131ac4e1eaa009c1835baeb58954754925f48f86a2dec01b6b6afa3dcd48e499.png",
          href: "https://beste.co",
          productCount: 234,
        },
        {
          name: "Converse",
          logo: "https://cdn.21st.dev/assets/localized/116b235857b64f2d253469401a87db39504b21ea3bdc45ad4e02bdddceb4979f.png",
          href: "https://beste.co",
          productCount: 189,
        },
      ]}
    />
  );
}