rating

Rating

Shows a rating as stars or dots in the brand's rating colour, with an optional score and review count, at three sizes.

States: Default

Parts

Part	File	Does
Rating	Rating.vue	Shows a rating as filled and empty marks, with an optional value and review count; the brand's rating colour fills the marks.
RatingIcon	RatingIcon.vue	Shows one mark of the rating, either filled or empty.
RatingMeta	RatingMeta.vue	Shows the numeric rating and the number of reviews behind it.

Anatomy

<Rating>
  <RatingIcon />
  <RatingMeta />
</Rating>

Styling

Part	Recipe
Rating	rating
Rating	rating-stars
Rating	rating-meta
Rating	rating-count
RatingIcon	rating-icon
RatingIcon	rating-dot
RatingMeta	rating-meta
RatingMeta	rating-value
RatingMeta	rating-count

Install

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

Installs with it: format
npm packages: @lucide/vue; class-variance-authority; reka-ui

API reference

Rating Rating.vue

Shows a rating as filled and empty marks, with an optional value and review count; the brand's rating colour fills the marks. Renders a <div>.

Prop	Type	Default
class	ClassValue	—

size	RatingSize	'md'

shape	'star' \| 'dot'	'star'

rating*	number	—

max	number	5

count	number	—

showValue	boolean	false

label	((score: number, max: number, count?: number \| undefined) => string)	`${score} out of ${max}${count ? `, ${count} ${count === 1 ? 'review' : 'reviews'}` : ''}`

Slot	Slot props
meta	{ rating: number; max: number; count: number \| undefined; }

Recipe rating	Sets
base: rating	3 properties

Recipe rating-stars	Sets
shape: dot	1 property

shape: star	1 property

Recipe rating-meta	Sets
base: rating-meta	4 properties

Recipe rating-count	Sets
base: rating-count	3 properties

RatingIcon RatingIcon.vue

RatingMeta RatingMeta.vue

Example