CommerceReviews
A product reviews section: a summary header (average rating + count) above a list of individual reviews, each with a star rating, author, optional date, and body. Presentational and theme-driven.
Customer reviews
- Mar 14, 2026
Exactly what I wanted
The canvas is heavy without being stiff and the handles don't bite into my shoulder when it's loaded with groceries. Stitching looks like it'll outlast me.
Alex Rivera - Feb 28, 2026
Great everyday tote
Color is a touch warmer than the photos suggest, but I like it more in person. One star off because the interior pocket is smaller than I expected.
Sam Chen - Feb 10, 2026
Bought a second one
First one held up to a year of daily commuting with no fraying, so I picked up a second for travel. The fabric softens beautifully after a few washes.
Jordan Park - Jan 22, 2026
Quality is solid but the bag is bigger than I needed for a laptop and a notebook. If you're carrying less, size down.
Casey Liu
Installation
pnpm dlx @hex-core/cli add commerce-reviewsAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
reviewsrequired | object | — | ReadonlyArray<{ author; rating: number (0–5); title?; body; date? }>. Individual reviews. rating is clamped to 0–5 and rounded for the star display. |
averageRating | number | — | Average rating (0–5) shown in the summary header. |
totalCount | number | — | Total review count shown in the summary header. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use below the product detail to show social proof. Provide averageRating and totalCount for the summary header, and the individual reviews list.
When not to use
Don't use for testimonials on a marketing page (use marketing-testimonial). Don't fabricate ratings — derive them from real review data.
Common mistakes
- Passing a rating outside 0–5 — it's clamped, but supply real values so the stars are accurate.
- Relying on star color alone to convey the rating — pair it with the numeric '4.5 out of 5' text (the summary does this).
- Omitting the author, leaving reviews unattributed.
Accessibility
Star rows are decorative (aria-hidden); the numeric 'X out of 5' text carries the rating for assistive tech. The section title is an <h2> and review titles are <h3>, preserving heading order.
Related components
Token budget: 650
Verified against @hex-core/components@1.12.0