---
title: "ReviewSummary"
description: "A review summary with average, star distribution and the review list. It includes an empty state and a verified-purchase label."
kind: block
id: C-052
category: storefront
registry: "review-summary"
docs: "https://koten.codehive.com.co/blocks/storefront/review-summary"
markdown: "https://koten.codehive.com.co/md/blocks/storefront/review-summary.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/review-summary.json"
language: en
---

# ReviewSummary · レビュー

> Block C-052 in the Koten UI catalog.

A review summary with average, star distribution and the review list. It includes an empty state and a verified-purchase label.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/review-summary.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/review-summary.json
```

## Files

- `@/components/patterns/review-summary.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Requirements

- **provider** — KotenProvider for the average and counts: The average is formatted with useKotenFormatters and star labels come from ratingLabel. Mount the block under KotenProvider so decimals and separators follow the active language.

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Full summary

The distribution uses bars with the count written alongside; each review repeats its rating in text.

```tsx
<ReviewSummary
  rating={4.6}
  count={128}
  ratingLabel={(value) => formatNumber(value, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + " out of 5"}
  countLabel={(count) => count + " reviews"}
  distributionLabel="Distribution"
  distribution={[
    { stars: 5, count: 86 },
    { stars: 4, count: 28 },
    { stars: 3, count: 9 },
    { stars: 2, count: 3 },
    { stars: 1, count: 2 },
  ]}
  verifiedLabel="Verified purchase"
  emptyLabel="No reviews yet"
  reviews={reviews}
/>
```

### No reviews

With an empty reviews array, emptyLabel appears; the average panel stays visible with zero stars.

```tsx
<ReviewSummary
  rating={0}
  count={0}
  ratingLabel={(value) =>
    formatNumber(value, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + " out of 5"
  }
  countLabel={(count) => count + " reviews"}
  distributionLabel="Distribution"
  distribution={[
    { stars: 5, count: 0 },
    { stars: 4, count: 0 },
    { stars: 3, count: 0 },
    { stars: 2, count: 0 },
    { stars: 1, count: 0 },
  ]}
  verifiedLabel="Verified purchase"
  emptyLabel="No reviews yet. Be the first to write one."
  reviews={[]}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `rating` | `number` | `—` | Average from 0 to 5; shown with one decimal and rounded for the stars. |
| `count` | `number` | `—` | Total review count, formatted by the provider. |
| `ratingLabel` | `(rating: number) => string` | `—` | Sentence that replaces the stars for screen readers. |
| `countLabel` | `(count: number) => string` | `—` | Label for the review total, including the unit. |
| `distribution` | `readonly ReviewDistribution[]` | `—` | Star and count pairs; bars are calculated against the total. |
| `reviews` | `readonly ReviewItem[]` | `—` | Each review carries id, author, date, rating, title, body and an optional verified flag. |
| `verifiedLabel` | `string` | `—` | Text for the verified-purchase badge; without it, the badge is not drawn. |
| `emptyLabel` | `string` | `—` | Message shown in place of the list when there are no reviews. |

## Accessibility

- Stars are decorative for screen readers; the ratingLabel sentence carries the exact value.
- The distribution writes the review count next to each bar, so length is never the only cue.
- Verified purchase is announced as a badge with text, not an icon alone.
- The empty state is visible text and never leaves the region without content.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/storefront/review-summary
- Markdown: https://koten.codehive.com.co/md/blocks/storefront/review-summary.md
- Repository: https://github.com/codehive-colombia/koten