Interactive half-star rating
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A star input preset to 3.5 with a line under it echoing the chosen score out of 5
When to use
- Read only star scores at 3 sizes, with partial stars for averages such as 3.5 or 4.6
- Star inputs that collect a whole star score in feedback and written review forms
- Review summaries with a count bar per star level, and 5 step emoji scales for quick feedback
When not to use
- A score the user must pick in half or finer steps: use the Slider component
- A full product page section of buyer quotes, avatars and a ratings overview: use the Review blocks
- A required score that keyboard and screen reader users must be able to set: use the Radio Group component
Agent notes
- The 3.5 preset in
useStateis the only half value it shows; every click throughsetRatinglands on a whole star - An
editableRatingtakes pointer clicks only: each star is adivwith anonClickand no role, tab stop or key handler - Clicks send whole numbers from 1 to
maxRatingtoonRatingChange; a decimalratingdraws a partial star but cannot be picked starClassNamestyles theshowValuenumber, not the stars; recolor stars fromclassNamethrough therating-star-filledslot
https://reui.io/components/rating/c-rating-7.mdget_example("c-rating-7")npx shadcn@latest add @reui/c-rating-7Shadcn Components in Rating Half-Star Input
About Shadcn Rating Half-Star Input
Interactive half-star rating. Built with the Rating component. A free, open source shadcn rating example you can install with npx shadcn@latest add @reui/c-rating-7 and edit as your own code.
What You Can Build With Shadcn Rating Half-Star Input
- Composes Rating, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-rating-7
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Rating Examples
- Basic Basic rating.
- Decimal Value Rating with decimal value.
- Show Value Rating with show value.
- Editable Rating with editable.
- Sizes Rating with size.
- Review Summary Rating with review summary
- Emoji Reactions Emoji reaction rating
- Review Text Rating with review text input
Related Shadcn Component Categories
Open-source shadcn resizable components for split panes, workspace layouts, and draggable dividers.
Open-source shadcn scroll area components for custom scroll regions, sidebar panes, and dense lists.
Open-source shadcn scrollspy components for docs navigation, active table of contents, and long-form sections.
Open-source shadcn select components for form selection, settings menus, and filter controls.
Open-source shadcn separator components for content grouping, toolbar dividers, and section breaks.
Open-source shadcn sheet components for slide-over details, side panels, and task flows.
Frequently Asked Questions
When should I use Shadcn Rating Half-Star Input?
Use it for a star input preset to 3.5 with a line under it echoing the chosen score out of 5.
Shadcn Rating as a whole fits:
- Read only star scores at 3 sizes, with partial stars for averages such as 3.5 or 4.6
- Star inputs that collect a whole star score in feedback and written review forms
- Review summaries with a count bar per star level, and 5 step emoji scales for quick feedback
For a score the user must pick in half or finer steps, use the Slider component. For a full product page section of buyer quotes, avatars and a ratings overview, use the Review blocks. For a required score that keyboard and screen reader users must be able to set, use the Radio Group component.
How do I install Shadcn Rating Half-Star Input?
Is Shadcn Rating Half-Star Input free to use?
Which components does Shadcn Rating Half-Star Input use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.