Rating Count

Display the rating of a product

1.3K

Installation

pnpm dlx shadcn@latest add https://gfed-registry.vercel.app/r/rating-count.json

Usage


import { RatingCount } from '@/components/ui/components/rating-count/rating-count';
 
export function DefaultRatingCount() {
  return <RatingCount average={4.0} ratingCount={1323} />;
}

Reference

Props

Prop	Type	Default	Description
`average*`	`number`	-	The average rating value (e.g., 4.5 out of 5).
`iconSize`	`"default" \| "md" \| "lg" \| "xl"`	`"default"`	Controls the size of the star icons.
`starColor`	`string`	`#EDC001`	The fill color of the star icons.
`textSize`	`"default" \| "sm" \| "md"`	`"default"`	Sets the font size of the rating text.
`ratingCount`	`number`	-	The total number of reviews for the product.
`textClassName`	`string`	-	Additional class names for customizing the rating text.
`iconClassName`	`string`	-	Additional class names for customizing the star icons.

Examples

Default

1.3K

Minimal

4.3

Detailed

1.5K ratings