A light product reviews section with an average score, a clickable rating histogram, a recommend ring, filter chips and review cards with verified badges and helpful votes.
Customer reviews
Wore it on a 6 day trek in the Dolomites with temps around -4°C. Stayed warm at camp with only a base layer underneath. Fits true to size.
Stitching and zippers feel premium. I have long arms and the sleeves still cover my hands, so size down if you are between sizes.
Rain beads right off and the hood fits over my helmet. After four months of daily use it still looks new.
Insulation is excellent. My phone nearly slipped out twice while hiking, which is why it loses two stars for me.
npx shadcn@latest add https://hyperblur.dev/r/shop-reviews.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shop-reviews.tsx.
import { ShopReviews } from "@/components/hyperblur/shop-reviews"
<ShopReviews productName="Alpine Down Jacket" onVote={(r, v) => console.log(r.id, v)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Customer reviews" | Small label above the title. |
| title | string | "What people say" | Section heading. |
| productName | string | "Alpine Down Jacket" | Used in the recommend sentence. |
| reviews | { id: string; author: string; location?: string; rating: number; title: string; body: string; date: string; verified?: boolean; variant?: string; helpful?: number; tags?: string[] }[] | 4 sample reviews | Review cards. `tags` are matched by the filter chips. |
| totalReviews | number | 1284 | Total count shown under the average. |
| distribution | number[] | [78, 14, 5, 2, 1] | Percent for 5 down to 1 stars. The average is computed from it. Clicking a bar filters the list. |
| filters | string[] | ["All", "Verified", "Warmth", "Fit", "Quality"] | Chips. The first shows everything, "Verified" keeps verified buyers, others match review tags. |
| recommendRate | number | 94 | Percent shown in the recommend ring. |
| writeLabel | string | "Write a review" | Label of the button in the summary column. |
| accent | string | "#16a34a" | Accent for verified badges, the ring and active votes. |
| onWriteReview | () => void | Called when the write button is clicked. | |
| onVote | (review: ShopReview, vote: "up" | "down") => void | Called when a helpful vote is toggled. | |
| onFilterChange | (filter: string, stars: number | null) => void | Called when a chip or a histogram bar changes the filter. |