Home / Blocks / E-commerce / Reviews & Ratings
5 blocks in this section

Shadcn Product Review Blocks

Present product feedback with shadcn/ui review lists, star ratings, a rating-distribution summary, reviewer details, and helpful voting.

How it works

Three steps to working code

Install a block and the files land in your repository. Nothing calls back to us.

  1. terminal

    $ npx shadcn@latest add @shadcnstore/review-rating-1

    ✓ Checking registry

    ✓ Installing dependencies

    01

    Run one command

    Every preview above prints its own. The CLI writes the block and the components it needs into your project.

    Installation docs
  2. your project 3 files added

    components/

    ├─ ui/

    ├─ button.tsx

    └─ navigation-menu.tsx

    └─ review-rating-1.tsx

    02

    Get real files

    React, TypeScript and Tailwind v4, with no framework imports. Next.js, Vite, Remix and Astro all work.

  3. review-rating-1.tsx

    <Menu.Trigger

    - asChild

    + render={<button />}

    />

    03

    Edit it as your own

    Built on Base UI, not Radix, so keyboard and focus behaviour come from the primitive.

Blocks that hold state already carry the use client directive the Next.js App Router needs.

Guide

Product reviews and rating summaries#

Reviews are the part of a product page a shopper trusts most and a shop controls least. These five cover the list, the distribution that gives a rating meaning, and the form that collects the next one.

The five review blocks#

  • Product Review & Ratings 1: a paginated review list with reactions and a write-a-review form. Free.
  • Product Review & Ratings 2: a rating summary with a per-star distribution above a review carousel. Free.
  • Product Review & Ratings 3: a review list with a rating filter, distribution bars and pagination.
  • Product Review & Ratings 4: a review section with per-category ratings, sort controls and a load-more action.
  • Product Review & Ratings 5: a simple list with a rating distribution and helpful voting.

Why the distribution matters more than the average#

Four stars from thirty reviews and four stars from three are different products. So are four stars where most reviews are five with a few ones, and four stars where every review is a four. The distribution bars answer both questions in the space an average occupies, which is why the summary blocks lead with them.

Per-category ratings#

Review Rating 4 breaks the score into categories such as build quality, ease of use and value. This is the single most useful addition for products where people disagree predictably: a tool that is genuinely excellent and genuinely expensive gets a muddled average and a very clear category breakdown.

Collecting a review#

Review Rating 1 includes the write-a-review form, with the star control, a title, the body and the fields you need for attribution. Asking for a rating before the text is deliberate, since a person who has already clicked four stars is far more likely to write the sentence than one facing an empty textarea.

Review structured data, and when not to publish it#

Publish review markup only for reviews you actually collected. Marking up invented ratings is a policy violation rather than a shortcut, and it is exactly the claim search engines verify against the visible page. Ship the block first, collect real reviews, then add the markup once there is something true to describe.

Where reviews sit on a product page#

Below the buying decision on the product detail page, with the average and the count visible near the price so a shopper knows the section exists. The marketing testimonials are the company-level equivalent for a landing page, and order history is where a returning customer is prompted to leave one.

FAQ

Reviews &amp; Ratings questions, answered

What people ask before choosing a block from this collection.

Review Rating 5 shows the distribution across star levels alongside the list, plus helpful voting on individual reviews. A distribution is what lets a shopper tell four stars from thirty reviews apart from four stars from three.
Only for reviews you actually collected. Review and rating markup on invented data is a policy violation, not a shortcut, and it is exactly the kind of claim search engines verify against the visible page. Ship the block first and add the markup when the reviews are real.
Customer images sit in a fixed aspect slot so a portrait photo does not stretch the row, and the layout still reads when a review has no image at all, which most will not.
Review Rating 1 and Review Rating 2 are free. The remaining review lists and the distribution summary are Pro under the licence on the pricing page.

Documentation

The components behind these blocks

How to install, customise and combine the shadcn/ui components this collection is built from.

Free & Premium Templates

Launch Faster with Complete Templates

Love these blocks? Get our free dashboard and landing page templates with 30+ pre-built pages and all the components you need. Premium templates with advanced features launching soon at $69.

Free Templates Now
30+ Pages Included
Premium Coming Soon