Rating
Interactive star rating and read-only rating badge with review counts.
Default
Interactive star rating with click and hover.
Default
Sizes
Three sizes: sm, md, lg.
Sizes
Read Only
Non-interactive display rating.
Read Only
Controlled
Controlled rating with external state.
Controlled
Selected: 2 stars
Rating Badge
Compact badge showing rating with optional review count.
Badge Variants
5.0(42)
3.8(256)
4.2
Badge Sizes
Three badge sizes.
Badge Sizes
4.5(128)
4.5(128)
4.5(128)
Usage
Import Rating and RatingBadge.
tsx
import { Rating, RatingBadge } from "@/components/ui/Rating";
// Interactive
<Rating defaultValue={3} size="md" />
// Controlled
const [val, setVal] = useState(2);
<Rating value={val} onChange={setVal} />
// Read-only
<Rating value={4} readOnly />
// Badge
<RatingBadge value={4.5} count={128} size="md" />Rating Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled rating value. |
| defaultValue | number | 0 | Initial value (uncontrolled). |
| max | number | 5 | Maximum number of stars. |
| onChange | (value: number) => void | — | Called on value change. |
| size | "sm" | "md" | "lg" | "md" | Star size. |
| readOnly | boolean | false | Disable interaction. |
RatingBadge Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Rating value (required). |
| max | number | 5 | Maximum stars. |
| count | number | — | Number of reviews. |
| size | "sm" | "md" | "lg" | "md" | Badge size. |