Five stars with a label and value. Hover previews up to the pointer.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/ratingPlayground
Empty
Rated
Read only
Disabled
Icons animation
Read only
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/rating
Accessibility
- Native radio inputs in a radiogroup, so it reads as 3 of 5.
- Read only is one image with a full description.
- The value is written out, not only drawn.
Motion
- Stars fill in 120 ms and press to 0.9 on a spring.
- With reduced motion, there is no press.
Responsive behavior
- 24 px stars, 16 px when read only. 280 px on Web and 358 px on Mobile.
Performance
- Five radio inputs and CSS fills. Hover only re-renders this component.
- Read only renders static spans with no handlers or Motion.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Rating. Props: label, value or defaultValue, onValueChange, readOnly, count, disabled, animated.
- Interactive rating is a radiogroup with whole stars from 1 to 5. Read only is role="img", rounds the stars and shows the exact average as text.
- Saving is yours: the demo only keeps local state.
Related
Review CardComponentA customer review with ink stars, a headline and three lines that open in place.NPS ScaleComponentEleven equal boxes from 0 to 10 with end labels. Choosing one reveals Submit.Feedback PromptComponentA yes or no question. Yes opens a note, No adds reason chips, and sending says thanks.Vote ButtonComponentA chevron over a count. Voting inverts the tile and rolls the count up by one.Radio GroupComponentPick exactly one. A surface circle that fills to an ink disc with a dot.