Five review cards — rating summary, standout quote, review composer, compact list and photo review — with count-ups, star pops, rolling vote counts and a shared-element photo viewer.
Rating summary
summary.tsxAverage that counts up over a star histogram whose bars grow in and filter the list.
| Prop | Type | Default | Description |
|---|---|---|---|
counts | [number, number, number, number, number] | [1284, 412, 96, 31, 18] | Review counts from 5 stars down to 1. |
title / subtitle | string | — | Heading and product line. |
defaultFilter | number | null | null | Initially selected star filter. |
onFilterChange | (stars: number | null) => void | — | Called when a bar is toggled. |
onWriteReview | () => void | — | Primary button handler. |
className | string | — | Extra classes on the card. |
Standout quote
quote.tsxSingle verified review with popping stars, a body that springs open with Read more, and a helpful toggle.
| Prop | Type | Default | Description |
|---|---|---|---|
author / meta / initials / date | string | — | Reviewer details. |
rating | number | 5 | Stars out of five. |
headline / body | string | — | Review title and text; blank lines split paragraphs. |
verified | boolean | true | Show the verified buyer badge. |
helpful | number | 38 | Existing helpful votes. |
previewLength | number | 180 | Characters shown before Read more. |
onHelpfulChange | (helpful: boolean) => void | — | Called when the vote toggles. |
className | string | — | Extra classes on the card. |
Write a review
write.tsxStar radio group with hover preview and spring pop, quick tags, counted text box and a thank-you crossfade.
| Prop | Type | Default | Description |
|---|---|---|---|
product | string | "Arden Wool Throw" | What is being reviewed. |
labels | [string × 5] | — | Words shown for 1–5 stars. |
tags | string[] | — | Quick tags the reviewer can toggle. |
maxLength | number | 400 | Character limit for the text. |
onSubmit | (review: { rating, text, tags }) => void | — | Called on post. |
className | string | — | Extra classes on the card. |
Compact list
compact.tsxDense rows with star lines and optimistic helpful votes whose counts roll.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Most helpful reviews" | List heading. |
reviews | CompactReview[] | — | { id, author, initials, rating, date, text, up, down }. |
onVote | (id: string, vote: "up" | "down" | null) => void | — | Called when a vote changes. |
className | string | — | Extra classes on the card. |
Photo review
photos.tsxReview with a drawn photo strip; a thumbnail grows into an in-card viewer with arrow keys and Escape.
| Prop | Type | Default | Description |
|---|---|---|---|
author / initials / date | string | — | Reviewer details. |
rating | number | 5 | Stars out of five. |
title / body | string | — | Review content. |
photos | ReviewPhoto[] | — | { alt, src?, scene?, tones? }; without src a drawn scene is used. |
className | string | — | Extra classes on the card. |
Install the whole set
Installs every review cards variant at once. Each section above has its own command for a single variant.
Accessibility
- Star ratings carry a text equivalent (“4.7 out of 5”); the star input is a radio group driven by arrow keys.
- Filters, helpful votes and likes are real buttons with aria-pressed, and counts are announced as text, not just icons.
- Reduced motion removes count-ups, bar growth and the photo zoom while keeping every state change.