Reviews

A score you can trust: ReviewSummary shows the shop's score as a stamp with the verified count, five meters for the distribution and its text equivalent — nothing under the host's minimum — and ReviewCard one review with the owner's reply indented.

Web · ✓Mobile · n/aBureau · ✓BêtaBlocs

import { ReviewSummary, ReviewCard } from "@krizaka/ui/reviews";

Web uniquement — React, depuis @krizaka/ui/reviews. Bêta : son API peut encore changer à une version mineure.

Mobile · n/a. A public storefront's block; the native apps read reviews in their own lists. → Card

Pourquoi il est là. Akinaza's shop pages (krizaka/akinaza#313): the shop's verified score and its review cards.

Quand l’utiliser

A shop's page: the clients' word as verified reviews (only a completed appointment may review), with a fair score.
Any place that rates a place, a person or a service with a 1 to 5 scale and wants the distribution visible.

Quand ne pas l’utiliser

A school-style mark out of 20 (a teacher's red): that is the tool sites' register.À la place : Grade stamp
A measure within a range that is not a rating (a quota, a balance).À la place : Meter

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { ReviewSummary, ReviewCard } from "@krizaka/ui/reviews";

Exemples

The score

A stamp, the verified count, five meters and the text equivalent.

A review

First name and initial, the month, the service, the words and the owner's indented reply.

Camille L.

octobre 2026Coupe femme

5 sur 5

Une coupe exactement comme je l'imaginais, et un salon où l'on se sent chez soi.

Réponse du salon · Maëlle

Merci Camille, à très bientôt !

Props

ReviewCard

One review: who, when, which service, the rating and the words — and the owner's reply.

Prop	Type	Défaut	Description
`author`requis	`string`	—	First name and initial ("Camille L.").
`date`requis	`string`	—	The month, formatted for the reader ("octobre 2026").
`dateTime`requis	`string`	—	The machine-readable date of `date` ("2026-10").
`rating`requis	`number`	—	The rating, 1 to 5.
`ratingText`requis	`string`	—	The rating in words ("5 sur 5").
`text`requis	`string`	—	The review.
`reply`	`{ label: string; author: string; text: string; }`	—	The owner's reply, indented under the review.
`service`	`string`	—	The service reviewed.

ReviewSummary

The score of a shop as a stamp, with the distribution of its verified reviews: nothing under the host's minimum.

Prop	Type	Défaut	Description
`count`requis	`number`	—	How many verified reviews stand behind it.
`countText`requis	`string`	—	The count with its « verified » ("27 avis vérifiés").
`distribution`requis	`readonly [number, number, number, number, number]`	—	How many reviews per rating, `[1 star … 5 stars]`.
`score`requis	`number`	—	The score, 0 to 5 (the host's, already fair: the Bayesian average of the verified reviews). Drawn by `scoreText`.
`scoreText`requis	`string`	—	The stamp's text, formatted for the reader ("4,8 / 5").
`starText`requis	`(stars: number, count: number) => string`	—	The name and value of one distribution meter ("5 étoiles : 20 avis").
`summaryText`requis	`string`	—	The whole thing in one sentence, for assistive technology ("4,8 sur 5, 27 avis vérifiés").
`minCount`	`number`	`1`	Renders nothing under this many reviews: a score from two people is not a score.

Accessibilité

ReviewSummary is a group named by its text equivalent (« 4,8 sur 5, 27 avis vérifiés »); the stamp and the count are hidden from assistive technology so nothing is read twice.
The distribution is five real meters, each named (« 5 étoiles : 20 avis »); the rating of a card is read in words and its stars are decorative.
A review's date is a time with its machine-readable value.

Bonnes pratiques

The host computes the score (a Bayesian average of the verified reviews) and formats every word: scoreText, countText, summaryText, starText, the dates.
Set minCount (the shop's minimum): ReviewSummary renders nothing under it, so a new shop shows no score rather than a lonely « 5,0 ».
Show only verified reviews and say so (« 27 avis vérifiés »); the owner's reply is a reply, never an edit of the review.
Three cards and a link to all of them, not a wall of text.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub