Rating

A star rating that works both ways: as an input that collects a score, and read-only as a display of one. Reach for it wherever a number between 0 and 5 is really a row of stars: the "rate this" step after a purchase, delivery or booking; a product, app-store or seller review form; a CSAT or satisfaction question at the end of a support ticket or chat; a post-call, post-session or post-course feedback prompt; an NPS-adjacent one-question survey; a difficulty, quality, severity or priority score on an internal form; and, in read-only mode, the average beside a listing, a product card, a search result, a testimonial, a restaurant or hotel card, or a review summary (an average like 3.7 fills 70% of the fourth star, so the display is not rounded to a whole one). Common asks it answers: "star rating", "rating component", "rating input", "react star rating", "five star rating", "5 star rating component", "half star rating", "half star rating react", "review stars", "star rating readonly", "average rating display", "display average rating stars", "feedback rating component", "shadcn rating", "shadcn star rating", "shadcn ui rating component", "rate this product component", "CSAT stars", "customer satisfaction rating ui", "react-rating alternative", "react-star-ratings alternative", "react-rating-stars-component alternative", "react-simple-star-rating alternative", "@smastrom/react-rating", "MUI Rating equivalent", "primereact rating alternative", "star rating with keyboard support", "accessible star rating", "star rating screen reader", "star rating in a form", "star rating react hook form", "controlled star rating react", "星評価 コンポーネント", "5段階評価 react", "レビューの星 表示", "星1つ半 評価", "評価入力 アクセシブル", "星で評価するUI". Official shadcn/ui has no rating or star item of any kind, and that is measured rather than remembered: its catalogue today lists 65 entries of which 62 are fetchable (code-block, questionnaire and trace 404) for 223,287 bytes of component source, and in all of it rating, Rating, aria-valuetext, allowHalf, "out of 5" and review are every one of them zero hits. The word star occurs 50 times and every single one of them is inside "start" -- items-start, data-[state=...], slide-in-from-start -- which was checked rather than assumed. Its slider is the nearest thing and it is a different shape of answer: a thumb on a track. So the usual fallback is a row of five buttons, and that is what makes it inaccessible: five tab stops, five things announced, and no shared value between them. This one is a real slider. It is focusable once with a focus-visible ring, arrow keys raise and lower the score in either axis, Home clears it to 0 and End maxes it out, and it exposes aria-valuemin, aria-valuemax and aria-valuenow plus a spoken aria-valuetext ("3.5 out of 5 stars") so a screen reader announces the score rather than counting stars. Read-only mode drops the slider role and renders as a labelled image instead, which is the correct semantic for a number nobody can change, and the individual stars stay aria-hidden either way because the value is announced once, not five times. Set allowHalf to take half stars -- click the left half of a star, or step by 0.5 from the keyboard. It works controlled or uncontrolled through a plain number value with onValueChange (a number, not a string, so there is nothing to parse), forwards a ref, and posts through a hidden input in native forms via name, which is what makes it drop into react-hook-form or a server action without a wrapper. max changes the number of stars for a 3-point or 10-point scale, size sets the pixel size, and disabled keeps the slider semantics while refusing input. Within pulld it is the one that collects a judgement: gauge, ratio-bar, progress-ring and sparkline draw a number that was measured, number-input and segmented-control collect one that is typed or chosen, and this is the one where the number is an opinion and the control has to look like the thing being given. Theme-aware through shadcn tokens -- filled stars use the primary colour, so it follows light and dark mode -- with lucide-react as its only dependency, for the star icon.