shadcn.io is not affiliated with official shadcn/ui
Checkout Prompt Reviews Block for Vue
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 Vue with Ark 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.