Shop by Category Grid

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, media-slot 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/ecommerce13.tsx instead.

Usage

The file also exports ecommerce13Demo, 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 { Ecommerce13, ecommerce13Demo } from "@/components/blocks/ecommerce/ecommerce13";

export default function Page() {
  return <Ecommerce13 {...ecommerce13Demo} />;
}

Props

Types

interface CategoryItem {
  name: string;
  productCount: number;
  href?: string;
  image?: { src: string; alt: string };
  featured?: boolean;
}

Behavior notes

• Fully static server component: there is no client state, filtering, or click handling anywhere in this block.
• A tile without an image falls back to a centered Package icon on a muted gradient rather than leaving a blank box, matching the placeholder used across other blocks that accept an optional photo.
• A tile only becomes a real link when its href is set; tiles without one render as a plain div with the same visuals, so the block works before a real category URL structure exists.
• The grid is a fixed 2/3/4-column responsive layout regardless of item count; passing more than 8 items wraps to additional rows rather than shrinking the tiles.
• featured only renders the Featured badge; it does not change tile size, sort order, or layout position, so featured tiles stay wherever they sit in the categories array.