Shop by Brand Grid

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce4.tsx instead.

Usage

The file also exports ecommerce4Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Ecommerce4, ecommerce4Demo } from "@/components/blocks/ecommerce/ecommerce4";

export default function Page() {
  return <Ecommerce4 {...ecommerce4Demo} />;
}

Props

Types

interface BrandItem {
  name: string;
  productCount: number;
  href: string;
}

Behavior notes

• Fully static server component with zero event handlers, every tile is a plain `next/link` anchor to `href`.
• There's no logo image or icon slot, the brand name renders as plain bold heading text, a wordmark stand-in rather than a real logo.
• The hover affordance (`hover:border-primary`, `hover:shadow-md`) is pure CSS on the anchor, nothing JavaScript-driven.
• The grid is fixed at 2 columns on mobile, 3 on small screens, and 5 on large screens regardless of how many brands are passed; more than 10 brands wraps to additional rows rather than shrinking tile size.