Rating

Installation

npx shadcn@latest add @blank/rating

Usage

import { Rating, RatingItem } from "@/components/ui/rating"

<Rating defaultValue={3} aria-label="Rating" />

The group is one tab stop. Arrow keys change the value the way they move through radio buttons, Home and End jump to the ends. Name the group with aria-label or point aria-labelledby at a FieldLabel.

Stars follow brand, like every other selection. For gold stars pass className="text-warning-primary". A star pops in as it fills, on hover too.

Examples

Half values

With step={0.5} the pointer picks the half of the star it is over and the arrow keys move by halves. clearable lets a second click on the current value reset it to zero.

Sizes and icons

RatingItem takes any icon. Style it off the item's data-state — full, half or empty — through the group/rating-item group.

API Reference

Rating

Without children, Rating renders max items.

RatingItem