Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Rating Dialog for React

A rating dialog with a five-star rating, an optional comment and a Submit button that waits for a rating.

Framework
UI library

A quick rating tells you a lot. This React dialog asks for one to five stars and an optional comment, and keeps Submit Rating disabled until a star is picked. It's shadcn.io's Dialog on Base UI with the Rating component and a Textarea.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Does the rating preview on hover?

Yes. Rating highlights the stars under the pointer before a click and handles the arrow keys, so there's no hover state to manage.

How is the rating stored?

The rating is controlled: onValueChange passes the new value, and Submit Rating takes disabled while it's 0.

Can I allow half stars?

Yes, set allowHalf on Rating.

How are the stars made larger?

The stars use the theme's warning color, and a class on Rating sets their size: **:data-[slot=rating-item-indicator]:size-8.

Should a low rating require a comment?

It helps: when the rating is 1 or 2, require the comment and ask what went wrong.

Does Submit Rating close the dialog?

Cancel is a DialogClose, so it does. Submit Rating doesn't; close the dialog from your handler after sending. Pass open and update it in onOpenChange, which receives the new boolean.

All 17 dialog examples