A customer review with avatar, half-star rating, a Read more clamp, a verified badge and a helpful vote.
The fern arrived early, packed so carefully that not a single frond was bent. It has already put out two new shoots and the pot is even prettier than the photos.
npx shadcn@latest add https://hyperblur.dev/r/review-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/review-card.tsx.
import { ReviewCard } from "@/components/hyperblur/review-card"
<ReviewCard name="Maya J." rating={4.5} title="Worth it" text="Arrived early and healthy." verified helpful={12} />| Prop | Type | Default | Description |
|---|---|---|---|
| rating | number | 5 | Rating from 0 to 5. Rounded to the nearest half star. |
| name | string | "Anonymous" | Reviewer name. Also seeds the initials avatar color. |
| date | string | "" | Date text shown at the top right. Hidden when empty. |
| title | string | "" | Short headline next to the stars. |
| text | string | "" | Review body. Clamped to `lines` with a Read more toggle when it overflows. |
| verified | boolean | false | Show the Verified badge next to the name. |
| helpful | number | 0 | Starting helpful count. The vote button toggles one more on top. |
| avatar | string | Avatar image URL. Initials are shown when missing or when the image fails to load. | |
| lines | number | 3 | Number of text lines shown before the Read more toggle appears. |