Block · C-052 · storefront

ReviewSummary

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

Install

Blocks compose Koten primitives; install koten-theme first.

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

Requirements

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.

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/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

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.

Read the whole page