reviews

Reviews

Review summary card with the average rating, a star distribution, the latest reviews with verified-purchase marks, and read-all and write-a-review actions.

States: Default

Parts

Part	File	Does
Reviews	Reviews.vue	Shows the average rating with its star breakdown and a few reviews.

Styling

Part	Recipe
Reviews	reviews-stars
Reviews	reviews-count
Reviews	reviews-verified
Reviews	heading
Reviews	meta
Reviews	line-title
Reviews	hint

Install

Writes 3 files into components/sections/reviews/. For agents, npx @frontic/ui docs reviews prints this reference as markdown; the MCP server serves the same.

Installs with it: avatar; button; card; format; progress; rating; separator; text
npm packages: @lucide/vue; reka-ui

Built from

Avatar Button Card Progress Rating Separator

API reference

Reviews Reviews.vue

Shows the average rating with its star breakdown and a few reviews.

Prop	Type	Default
title	string	'Customer reviews'

description	string	—

rating*	number	—

total*	number	—

distribution	ReviewsShare[]	[]

reviews	ReviewsEntry[]	[]

totalLabel	((count: number) => string)	count === 1 ? '1 review' : `${count} reviews`

starsLabel	((stars: number) => string)	stars === 1 ? '1 star' : `${stars} stars`

verifiedLabel	string	'Verified purchase'

readAllLabel	((count: number) => string)	`Read all ${count}`

writeLabel	string	'Write a review'

ratingShape	'star' \| 'dot'	'star'

surface	'raised' \| 'bare'	'raised'

locale	string	—

class	ClassValue	—

Event	Payload
readAll	—

write	—

Data attribute	Values
data-surface	'raised' \| 'bare'

Recipe reviews-stars	Sets
base: reviews-stars	4 properties · 3 inherited

Recipe reviews-count	Sets
base: reviews-count	5 properties · 3 inherited

Recipe reviews-verified	Sets
base: reviews-verified	4 properties · 1 inherited

Recipe heading	Sets
base: heading	1 property

Recipe meta	Sets
base: meta	3 properties

Recipe line-title	Sets
base: line-title	2 properties

Recipe hint	Sets
base: hint	2 properties

Example