Shadcn Rating Editable

Rating with editable. Built with the Rating component. Uses sonner alongside the shadcn primitives. A free, open source shadcn rating example you can install with npx shadcn@latest add @reui/c-rating-4 and edit as your own code.

Rating with editable.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A click to score input that starts empty, prints the hovered or picked number and confirms each pick with a toast

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 fixed score shown with its number that the reader cannot change: use the Rating Show Value example
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
A score picked in half or finer steps rather than whole stars: use the Slider component

Agent notes

handleRatingChange only sets productRating and raises a toast, which needs a mounted Sonner toaster; save the score there
The toast.success title is a plain string that prints {rating} as typed; only the description template fills in the score
An editable Rating takes pointer clicks only: each star is a div with an onClick and no role, tab stop or key handler
Clicks send whole numbers from 1 to maxRating to onRatingChange; a decimal rating draws a partial star but cannot be picked
starClassName styles the showValue number, not the stars; recolor stars from className through the rating-star-filled slot

Third-party API docs

Sonner v2: API reference, docs

Markdownhttps://reui.io/components/rating/c-rating-4.md

MCPget_example("c-rating-4")

Installnpx shadcn@latest add @reui/c-rating-4

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Rating Editable

Rating

Dependencies

sonner

About Shadcn Rating Editable

What You Can Build With Shadcn Rating Editable

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-4
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.
Sizes Rating with size.
Review Summary Rating with review summary
Half-Star Input Interactive half-star rating
Emoji Reactions Emoji reaction rating
Review Text Rating with review text input

Related Shadcn Component Categories

Resizable
Open-source shadcn resizable components for split panes, workspace layouts, and draggable dividers.
Scroll Area
Open-source shadcn scroll area components for custom scroll regions, sidebar panes, and dense lists.
Scrollspy
Open-source shadcn scrollspy components for docs navigation, active table of contents, and long-form sections.
Select
Open-source shadcn select components for form selection, settings menus, and filter controls.
Separator
Open-source shadcn separator components for content grouping, toolbar dividers, and section breaks.
Sheet
Open-source shadcn sheet components for slide-over details, side panels, and task flows.

Frequently Asked Questions

When should I use Shadcn Rating Editable?

Use it for a click to score input that starts empty, prints the hovered or picked number and confirms each pick with a toast.

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 fixed score shown with its number that the reader cannot change, use the Rating Show Value example. 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. For a score picked in half or finer steps rather than whole stars, use the Slider component.

How do I install Shadcn Rating Editable?

Run npx shadcn@latest add @reui/c-rating-4. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Rating Editable free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Rating Editable use?

It composes Rating. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.