E-commerce

ReviewList

Review list with star ratings, rating distribution summary, and verified badges.

Quick Preview

4.3

4 reviews

Alex JohnsonVerifiedJun 2, 2025

Absolutely love it!

This exceeded my expectations. Build quality is top-notch and it works perfectly.

Sam LeeVerifiedMay 28, 2025

Great value for money

Really solid product. Minor issue with the packaging but overall very happy with my purchase.

Kim ParkMay 15, 2025

Decent product but delivery took longer than expected. Works as advertised though.

Jordan SmithVerifiedMay 10, 2025

Best purchase this year

I've tried many similar products and this one blows them all out of the water. Highly recommend!

Installation

npm install lucide-react

Without summary

showSummary={false}

Alex JohnsonVerifiedJun 2, 2025

Absolutely love it!

This exceeded my expectations. Build quality is top-notch.

Sam LeeVerifiedMay 28, 2025

Really solid. Minor packaging issue but overall very happy.

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a ecommerce component named ReviewList in React/Next.js.
Goal: recreate the same overall UI and behavior as the ReviewList reference from a component gallery.
What it needs to communicate: Review list with star ratings, rating distribution summary, and verified badges..

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Prioritize conversion-oriented hierarchy, product clarity, and strong CTA styling.
- Handle price, status, quantity, and selection states cleanly.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- reviews: Review[] — Review items (uses defaults if omitted)
- averageRating: number — Override computed average
- totalReviews: number — Override total review count
- showSummary: boolean — default true — Show rating distribution panel
- className: string — Additional CSS classes

Reference usage patterns:
- No examples were documented. Infer a sensible default presentation and one richer usage example.

Feature expectations:
- Rating distribution
- Verified badge
- Helpful votes
- Star breakdown

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`reviews`	`Review[]`	-	Review items (uses defaults if omitted)
`averageRating`	`number`	-	Override computed average
`totalReviews`	`number`	-	Override total review count
`showSummary`	`boolean`	`true`	Show rating distribution panel
`className`	`string`	-	Additional CSS classes