Write a Review Form React component
A product review form with a hover-preview star rating, a fit scale, headline and review fields with a live character goal, quick tags, drag-and-drop photo previews, a recommend toggle, name and email with an initial-only option, a live preview card, inline validation and an animated thank-you screen.
About the Write a Review Form component
Write a Review Form collects everything a useful review needs in one calm screen: a star rating, how the product fits, a headline, the review itself, quick tags, photos and whether the buyer would recommend it.
A live preview beside the form shows exactly how the review will look while it is being written, which nudges people toward clearer headlines and longer, more helpful text. Validation is inline and friendly, and submitting ends on a thank-you screen with an optional reward.
When to use it
Use it on a dedicated review page linked from post-delivery emails or the order history, where buyers arrive ready to write.
For a quick one-tap rating inside an email or a product card, a star row alone is enough; send people here only when they choose to add more.
Installation
Add the Write a Review Form component to your project with the shadcn CLI. It lands in components/write-a-review-form.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/write-a-review-formOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Write a Review Form with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Write a Review Form FAQ
- What does onSubmit receive?
- A ReviewDraft with rating, fit (0 to 5), title, body, tags, recommend (true, false or null), name, email, initialOnly and photos as File objects. If onSubmit returns a promise, the button keeps its sending state until it resolves.
- How is validation handled?
- Nothing turns red while typing. On the first submit, missing fields show inline messages linked with aria-describedby, the first invalid field gets focus, and messages disappear as each field becomes valid.
- How do photo uploads work?
- Shoppers can click the dropzone or drag images onto it. Up to maxPhotos images show as previews with remove buttons, and their object URLs are revoked when removed or when the form unmounts. The files are only sent through onSubmit.
- Can I change the tags and the minimum length?
- Yes. Pass your own tags array (up to three can be picked) and a minLength for the review text. The character hint and progress bar follow minLength.
- Is it accessible?
- The rating, fit and recommendation controls are radiogroups, the stars support arrow, Home and End keys, tags are toggle buttons with aria-pressed, every input has a label, errors are linked to their fields and the thank-you screen is announced as a status.
