Featured Products Grid

Installation

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

Usage

The file also exports ecommerce29Demo, 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 { Ecommerce29, ecommerce29Demo } from "@/components/blocks/ecommerce/ecommerce29";

export default function Page() {
  return <Ecommerce29 {...ecommerce29Demo} />;
}

Props

Types

type FeaturedProduct = {
  id: string;
  name: string;
  price: string;
  rating: number; // 0-5, rounded to the nearest whole star for the filled-star count
  image?: { src: string; alt: string };
};

Behavior notes

• The wishlist heart is genuinely interactive: it is real per-card local state toggled on click, with a matching aria-pressed value and label, unlike the Quick add overlay below it.
• "Quick add to cart" is a pure CSS hover reveal (opacity/translate on group-hover) with no click handler, it's a static call-to-action placeholder, not a working add-to-cart.
• The hover overlay only appears on pointer hover; on touch devices it stays hidden since there is no hover state, so the wishlist heart (always visible) is the only interactive affordance on touch.
• A product without an image falls back to a centered ShoppingBag icon on a muted background instead of a broken image.