# Topic Filter Reviews block

> Customer Reviews Section with Sentiment Topic Filter Chips and Two-Column Review Grid

Product reviews section with topic filter chips showing per-theme confidence percentages and a two-column grid of avatar, star rating, verified badge, and helpful-counter tiles. ReUI Rating, Badge, shadcn Avatar, Button. Testimonials, social proof.

- Type: Pro block
- Category: [Review](https://web.dev.reui.io/blocks/ecommerce/review.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/review/review-2
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/rating.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/rating.md
- MCP: `get_block("review-2")`
- Built with: Avatar, Badge, Button, Rating
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Topic chips with a percent score above a 2 column grid of headlined reviews, each with a thumbs up helpful count

## Agent notes

- The `TOPICS` chips set `activeTopic` but nothing filters `REVIEWS`; filter the list by the active topic yourself
- Each `percent` in `TOPICS` is a hardcoded demo figure; compute it from your own review sentiment data
- The helpful button in `ReviewTile` has no `onClick`, so the `helpful` counts never change

## When not to use

- A rating summary with star distribution bars and top mention tags beside the list: use [Rating Summary Reviews](https://web.dev.reui.io/blocks/ecommerce/review/review-3.md) (`get_block("review-3")`)
- Quotes that rotate on their own in a slider rather than sitting in a fixed grid: use [Star-Led Reviews](https://web.dev.reui.io/blocks/ecommerce/review/review-6.md) (`get_block("review-6")`)

## Install

```bash
npx shadcn@latest add @reui/review-2
```

## About Review blocks

### When to use

- Customer reviews on a product page: stars, reviewer avatars and a link to all reviews
- Buyer quotes as social proof, rotating in an auto playing slider or set out in a static grid
- A ratings overview with the average score, star distribution bars and the topics buyers mention

### When not to use

- A slider of product photos or promo slides with no buyer quotes in it: use [Carousel](https://web.dev.reui.io/components/carousel.md) (`get_component("carousel")`)
- A star score on its own, or a star input inside a form with no review text: use [Rating](https://web.dev.reui.io/components/rating.md) (`get_component("rating")`)
- Rows of metrics, transactions or integrations with a figure or button on each: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)

### Agent notes

- Every `Reviews` root takes no props and reads `PRODUCT` plus `REVIEWS` or `TESTIMONIALS` from data.ts; add props to pass in your own product
- `PRODUCT.reviewCount` is a fixed 1284, not the length of the 3 to 6 reviews each block renders; set it from your review total
- Reviewer names link to `authorHref` and the review count to `PRODUCT.allReviewsHref`, both demo hash anchors to point at your routes

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.