# Review 03

A shadcn/ui block from the [@commercn](https://commercn.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/commercn/review-03).

- Page, with a live preview: https://shadcn.exchange/r/commercn/review-03
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/commercn/review-03-light-442257aa13faa9aa.png
- Registry item: https://commercn.com/r/review-03.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://commercn.com/r/review-03.json
```

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

## Files

### `src/components/commercn/reviews/review-03.tsx`

```tsx
import { Star } from "lucide-react";
import { CardContent } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

const review = {
    text: "I've never seen such attention to detail. This product has completely transformed my daily workflow.",
    author: "Emily Davis",
    rating: 4,
    image: "https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/simple_person_c.png",
};

export function ReviewThree() {
    return (
        <div className="relative max-w-3xl">
            <div className="absolute top-0 -left-4 -right-4 h-[1px] bg-neutral-400"></div>
            <div className="absolute bottom-0 -left-4 -right-4 h-[1px] bg-neutral-400"></div>
            <div className="absolute left-0 -top-4 -bottom-4 w-[1px] bg-neutral-400"></div>
            <div className="absolute right-0 -top-4 -bottom-4 w-[1px] bg-neutral-400"></div>

            <CardContent className="flex flex-col items-center gap-6 py-12">
                <div className="flex gap-0.5">
                    {Array.from({ length: 5 }).map((_, i) => (
                        <Star
                            key={i}
                            className={`size-5 stroke-1 ${i < review.rating ? "fill-foreground/50 text-foreground" : "fill-muted-foreground/30 text-muted-foreground/30"}`}
                        />
                    ))}
                </div>

                <blockquote className="text-2xl lg:text-3xl font-medium text-center leading-snug">
                    "{review.text}"
                </blockquote>

                <div className="flex flex-col items-center gap-1">
                    <Avatar className="size-12 border border-neutral-400">
                        <AvatarImage src={review.image} alt={review.author} />
                        <AvatarFallback>JS</AvatarFallback>
                    </Avatar>
                    <h5 className="text-md font-medium">{review.author}</h5>
                </div>
            </CardContent>
        </div>
    );
}
```