shadcn.io is not affiliated with official shadcn/ui
Rate Your Order Review Form Storefront Block for React Aria
A review form that rates two paint tins and the shop in one pass, with star ratings, quick tags, a progress count, a message under any unrated part and a result list that replaces the form.
Installation
Overview
Ask for the rating of a whole order at once, with this review form for React with React Aria. A header names the task and says what Zinc & Zest, a paint shop, sells. A hairline frame with a plus mark on each corner holds a progress bar and a count ("Rated 2 of 3") over three parts: the wall paint, the trim paint and the shop's delivery and packaging. Each part has five Rating stars with a word beside them and a set of quick tags to press, such as "Goes on evenly" or "Needs two coats". An optional note follows. Send checks the form: any part without a rating gets a message under it, the status line says how many are left and focus moves to the first one. When all three are rated, the form is replaced, in the same space, by a list of what was rated, with focus on its heading and a Rate again button. It's built from Rating, Toggle Group, Progress, Field and Guides, with a CSS entrance only. For an order-complete page or a review request.
FAQ
How do I change the parts and the tags?
Edit PARTS: each has an id, a title, a sub line (the product and variant, or the order number) and the tags offered. The progress count, the checks and the result list read from it, so add a part and the form follows.
How does it check the form?
Pressing Send looks for parts with no rating. Each gets a message under it, the status line says how many are left, and focus goes to the first one. Rating a part clears its message. Tags and the note are optional.
What stays local, and how do I wire it to a real store?
Nothing is sent; the ratings stay in the page's state and the result says so. In your app, post the ratings, tags and note to your reviews API in send and show the result when it answers.
Does the panel change height when I send?
No. The form and the result sit in one grid cell, and the one that is not shown is invisible, so the panel keeps the form's height.