A public reviews summary: a large average, five stars with fractional fill, the review count, a 5 to 1 distribution that animates in, a Rate us link and an optional top review.
npx shadcn@latest add https://hyperblur.dev/r/rating-review-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/rating-review-card.tsx.
import { RatingReviewCard } from "@/components/hyperblur/rating-review-card"
<RatingReviewCard distribution={[412, 96, 21, 8, 5]} reviewUrl="https://example.com/review" quote={null} />| Prop | Type | Default | Description |
|---|---|---|---|
| distribution | number[] | [968, 214, 58, 22, 22] | Review counts for 5, 4, 3, 2 and 1 stars, in that order. Drives the bars and, by default, the average and the count. |
| rating | number | Average shown in large type. Computed from distribution when omitted. | |
| count | number | Total number of reviews. The sum of distribution when omitted. | |
| source | string | "Customer reviews" | Label at the top of the card, for example the platform the reviews come from. |
| reviewUrl | string | "https://cornerkitchen.example/reviews" | Where the Rate us button goes. Opens in a new tab. Empty hides the button. |
| quote | { text: string; author: string; meta?: string; rating?: number } | null | A five-star review | Top review under the bars. Pass null to hide it. |
| appearance | "dark" | "light" | "dark" | Color scheme of the card. |
| accent | string | "#2f7bff" | Focus ring and avatar color. |
| starColor | string | "#f5b301" | Color of the stars and the bars. |
| locale | string | "en-US" | Locale used to format the average and the count with Intl.NumberFormat. |
| labels | Partial<{ reviews; outOf; rateUs; topReview; starsRow }> | { reviews: "{n} reviews", outOf: "out of 5", rateUs: "Rate us", topReview: "Top review", starsRow: "{s} stars" } | Every visible string. {n} is the formatted count and {s} the star level. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |