Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dialog - Rating
A rating dialog with interactive star rating and optional feedback textarea for collecting user experience scores
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Star ratings without hover preview feel broken. This React dialog combines clickable 5-star rating with hover effects using Lucide React icons and shadcn/ui components. Built with Dialog, useState for rating state, and Textarea for comments, stars fill yellow on hover and click. Perfect for product reviews, customer satisfaction surveys, or post-interaction feedback where numeric ratings matter.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Feedback Dialog
Open-ended feedback collection
Standard Dialog
Basic modal dialog structure
Button Component
Interactive buttons
Textarea Component
Multi-line text input
Newsletter Dialog
Simple single-input dialog
Badge Component
Status indicators