shadcn.io is not affiliated with official shadcn/ui
Checkout Prompt Reviews Block for React
The review prompt on an order page for a coffee subscription: a star rating for each of the two coffees in the box and one shared comment, beside the order drawn as a receipt, with the share of recent orders that were reviewed.
Installation
Overview
An order-page review prompt for React with Base UI, for Bothywell, a fictional coffee subscription. A split behind a divider. At the end, the prompt: a headline, a rating for each of the two coffees in the box (five named stars each, set with the arrow keys), one shared comment, a Shine Button that sends it and a line that says how many of the last 200 orders were reviewed (142, which is 71%, worked out from typed totals). At the start, in a framed panel, the order as a receipt: a list with the masked order number and the delivery date, one ruled row per coffee and a total worked out from the prices in cents. Sending checks both ratings and, after a rating of 1 or 2, asks for a reason of at least ten characters; each problem shows under its field and focus goes to the first one. A good form turns into a thanks that says nothing was sent. The prompt comes first in the page; from the lg breakpoint the receipt is drawn at the start, and on a phone it follows the prompt. It's built from Rating, Field, Textarea, Frame, Guides, Button and Shine Button, with your theme's tokens for every colour.
FAQ
Is the review sent anywhere?
No. Sending shows a thanks that says "Nothing was sent in this demo" and repeats the two ratings and the comment; "Review it again" brings the empty form back. To keep reviews, post draft where submit says so and show the thanks when your endpoint answers.
Why must both coffees be rated?
One rating per item is the point of an order review: a shared score would hide which coffee was the problem. Each missing rating is named under its stars ("Rate the Ember Roast.") and focus goes to the first. The comment stays optional unless the lowest rating is 1 or 2.
Where do the figures on the page come from?
The orders figures come from REVIEWED and ORDERS at the top of the file, and the share is rounded from them. The receipt's rows come from ITEMS, with each price in cents, and the total is their sum, formatted by moneyOf. The order number is masked in the data, not hidden by styling.
Related
- Pro
In-App Request Prompt Reviews
Ask and writeA review request drawn as a phone notification for a candle maker: five named stars, a Remind me select (tomorrow, in 3 days, next week) and Not now, each answering in a polite line that keeps the choice.
- Pro
One Tap Quick Rating Reviews
Ask and writeA one-tap star rating for a phone case: the tap rates at once, the product's average is worked out again with yours counted in, Undo takes it back, and Add a comment opens a text box with a real check.
- Pro
Full Write Form Reviews
Ask and writeThe whole review form on one page for a cast-iron pan: a named star rating, a title and text with live counts, pro and con tag lists, a recommend choice, photo names, and a sticky checklist with a progress bar.
- Pro
Multi Step Form Reviews
Ask and writeA four-step review wizard for a bike helmet: Rate, Write, Details and Confirm in one framed form, each step checked before Next, a confirm step that repeats the review as an article, and an honest thanks.
- Pro
Inline Rating Widget Reviews
Ask and writeRate in place in a list of recipes: each ruled row shows its community average and a Rate button that opens a popover with named stars, an optional line and Save; after saving, the row shows your stars with Edit.
- Pro
Docked Widget Collection Reviews
Ask and writeA docked review widget on a drawn product page for a baby monitor: a tab that folds open to two named star ratings, one line of text, an optional photo name and a progress bar, with the three steps for embedding it beside it.