ReviewBlock

Pill-shaped star rating block with decimal star fills and optional review count text.

Quick Preview

23 Reviews

Use size for the Figma-defined xs, sm, md, and lg review block variants.

23 Reviews

import { ReviewBlock } from "@giddaa-housing/ui/review-block";

<ReviewBlock rating={4.6} reviewCount={23} />;

Prop/API	Type	Default	Description
`rating`	`number`	required	Rating value clamped to the `0`-`5` range. Decimal values render partial star fills.
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Controls the Figma-defined star, text, gap, and padding scale.
`reviewCount`	`number`	-	Optional count rendered below the stars when review text is enabled.
`reviewLabel`	`string`	`"Review"`	Singular label used for review text. Plural appends `s`.
`showReviewText`	`boolean`	`true`	Shows the review count below the stars when `reviewCount` is provided.
`bordered`	`boolean`	`true`	Adds the brand-tinted pill border.
`ratingLabel`	`string`	generated	Overrides the accessible label.
`render`	Base UI render prop	-	Changes the rendered element while preserving styles.
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root element.

The root renders with role="img" and a generated label like 4.6 out of 5 stars, 23 Reviews.
Override ratingLabel when nearby copy already describes the review source or when the count needs custom wording.