Rating Badge and Stars

Components for displaying user ratings and reviews, available in star-based or badge formats.

1. Rating Stars

Displays a numeric rating using five stars, including partial filling for decimal values.

import { RatingStars } from "@/components/ui/rating";

<RatingStars rating={3.5} />

Displays a rating in a compact badge format, with a title and subtitle to provide context (e.g., number of reviews).

Best Design Tool

2,000+ reviews

import { RatingBadge } from "@/components/ui/rating";

<RatingBadge 
  rating={4.7} 
  title="Best Design Tool" 
  subtitle="2,000+ reviews" 
/>

Prop	Type	Default	Description
rating	number	—	The current rating value, usually between 0 and 5. Supports decimals.
maxStars?	number	5	The maximum number of stars to display.

Prop	Type	Default	Description
rating	number	—	The rating value, typically formatted with one decimal.
title	string	—	The main title of the badge (e.g., "Best Tool").
subtitle	string	—	The subtitle providing context (e.g., "2,000+ reviews").