# Base

> A starter customer review layout with star ratings, reviewer names, and comment text. Drop it onto a product page to show real shopper feedback fast.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/ecommerce-ecommerce-customer-reviews-base).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/ecommerce-ecommerce-customer-reviews-base
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/ecommerce-ecommerce-customer-reviews-base-light-1e91ac78b268a9cd.png
- Registry item: https://www.shadcn-ui-blocks.com/r/ecommerce-ecommerce-customer-reviews-base.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/ecommerce-ecommerce-customer-reviews-base.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`

## Files

### `components/blocks/ecommerce/ecommerce-customer-reviews/base.tsx`

```tsx
import { Star } from "lucide-react";

export default function Base() {
  return (
    <div className="container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
      <div className="mx-auto max-w-4xl text-center">
        <h2 className="mb-8 text-3xl font-bold tracking-tight sm:text-4xl">
          What Our Customers Say
        </h2>

        <div className="bg-muted/50 rounded-lg p-8 md:p-12">
          <div className="mb-6 flex justify-center">
            {[...Array(5)].map((_, i) => (
              <Star
                key={i}
                className="size-6 fill-yellow-400 text-yellow-400"
              />
            ))}
          </div>

          <blockquote className="mb-6 text-xl leading-relaxed font-medium md:text-2xl">
            &quot;Exceptional product quality and customer service. The delivery
            was fast and the items exceeded my expectations. I&apos;ll
            definitely be shopping here again!&quot;
          </blockquote>

          <footer className="text-muted-foreground">
            <div className="text-foreground font-semibold">Sarah Johnson</div>
            <div>Verified Customer • Purchased 2 weeks ago</div>
          </footer>
        </div>
      </div>
    </div>
  );
}
```