shadcn.io is not affiliated with official shadcn/ui
Posted Review Card Success Block for React
A full-height confirmation that shows a posted review as it appears: avatar, verified purchase, a read-only four-star rating, title and text, a 24-hour edit that swaps the text for a textarea, and a Copy link button.
Installation
Overview
Show a review exactly as readers will see it with this confirmation page for React with Base UI. It is the Fellpack Outfitters page after a customer posts a review of a daypack, a whole screen with the page's rails and one band across it. A check in a muted tile, the heading and one sentence sit over a corner-marked card ruled by Guides: an initials Avatar, the name, "Verified purchase", a read-only Rating of four out of five, a title, the text and the fixed date. For 24 hours the author can press Edit review, which swaps the text for a Textarea with Save changes and Cancel, and a Copy Button copies the review's address. The one primary is the Shine Button Back to the shop, pinned to the foot of a phone's screen. For shops, marketplaces and booking sites that let people review what they bought.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was posted. The shopper, the review, the daypack and the review address (under .example) are typed constants, and Save changes only replaces the text in the page, so a reload brings the original back. To wire it, render the review the server returned, send Save changes to your update endpoint, refuse it once the 24 hours are over, and show the "edited" mark from the saved record.
Does the card change size when I edit?
No. Reading and editing share one grid cell, so the card keeps the height of the larger state and nothing around it moves. The state that is not showing is hidden and inert, so it leaves the tab order. Saving an empty review is refused in words under the field, and focus returns to Edit review after Save or Cancel.
How is the rating read out?
The stars are drawn for the eye and hidden from assistive technology, so the words "4 out of 5" beside them carry the score. The stars use the foreground colour in both themes, filled to the score and faint beyond it, and they mirror in a right-to-left language.
Where does the 24 hours come from?
From two typed moments: the day and minute the review went up, and the same minute a day later. Both are fixed UTC dates, never computed from the visitor's clock, so the sentence under the heading reads the same on every server. In a real product, compare the saved time with the server's clock when the edit is sent.
Related
- Pro
A confirmation after rating a trail: the average worked out from five counts, your own stars, a five-row distribution with your row outlined, and an optional comment in a disclosure with a textarea and Save.
- 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
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
Testimonial Form
Collect a reviewA form for writing your own testimonial about Quill, in a split page column: name, role, star rating, a quote with a character counter and a permission switch on one side, a live preview card in a card on the other, and a Shine Button to send.
- Pro
A full-height confirmation for a published post: its address in a read-only field with a real copy button, a greyscale card showing how the link looks when shared, and links for three places to share it with two-letter tiles.
- Pro
A confirmation after sending a feature request: the request with a four-word pipeline from Triage to Shipped, and four similar requests, each with a status and a Vote toggle that counts once and can be taken back.