Product Reviews Grid

Installation

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

Usage

The file also exports ecommerce25Demo, 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 { Ecommerce25, ecommerce25Demo } from "@/components/blocks/ecommerce/ecommerce25";

export default function Page() {
  return <Ecommerce25 {...ecommerce25Demo} />;
}

Props

Types

type ProductReview = {
  reviewerName: string;
  rating: number; // 0-5, rounded to the nearest whole star for the filled-star count
  productName: string;
  text: string;
  verified?: boolean;
  helpfulCount: number;
  image?: { src: string; alt: string };
};

Behavior notes

• Fully static: the star rating is a rounded visual built from the rating number and the helpfulCount is a plain number, not a live counter, so clicking anywhere on a card does nothing.
• "Verified Purchase" only renders when a review sets verified: true; unverified reviews just omit the badge rather than showing a "not verified" state.
• A review without an image falls back to the product name's first letter in a muted tile instead of a broken image or generic icon.
• Review text is clamped to 4 lines with line-clamp-4; longer reviews are visually truncated with no "read more" expansion, since this grid favors scanability over full text.