Product Reviews Block React component
A product review list: average rating, sorting, filter chips for photos, star level and the topics people mention most, review cards with verified badges, purchased variant, read more, photos, store replies and a helpful vote, plus 'show more' paging.
About the Product Reviews Block component
Product Reviews Block helps shoppers find the reviews that answer their question. Topic chips come straight from what reviewers talk about, so someone worried about comfort can read only those reviews, and photo and star filters narrow things further.
Each review shows who wrote it, what variant they bought and whether the purchase is verified, with long reviews collapsed and store replies right underneath. Helpful votes push the most useful reviews to the top.
When to use it
Use it on product pages below the details, or on a dedicated reviews page.
For the star distribution chart use the Rating Summary Breakdown; for a grid of customer photos use the Photo Review Gallery; to collect reviews use the Write a Review Form.
Installation
Add the Product Reviews Block component to your project with the shadcn CLI. It lands in components/product-reviews-block.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/product-reviews-blockOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ProductReviewsBlock /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| product | string | "Wireless Earbuds" |
| reviews | Review[] | REVIEWS |
| pageSize | number | 4 |
| onHelpful | (id: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- productstringDefault: "Wireless Earbuds"
- reviewsReview[]Default: REVIEWS
- pageSizenumberDefault: 4
- onHelpful(id: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
Collections
Use-case pages that compare Product Reviews Block with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Product Reviews Block FAQ
- Where do the topic chips come from?
- Each review has topics. The six most frequent ones become chips with counts, so the filters always match what reviewers actually wrote about.
- How does sorting by newest work?
- Each review has an order number; higher means newer. Pass dates as display strings so server and browser show the same text.
- Are helpful votes saved?
- Votes toggle locally and call onHelpful the first time. Persist them on your server and pass the updated helpful counts back in.
- Can I load reviews from an API page by page?
- Yes. Replace the 'Show more' handler with a fetch for the next page and append to reviews.
- Is it accessible?
- Filters are toggle buttons with aria-pressed, the result count is announced, stars have text labels, Read more uses aria-expanded and the helpful button describes its count.
