shadcn.io is not affiliated with official shadcn/ui
Docked Widget Collection Reviews Block for React
A 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.
Installation
Overview
A feedback widget section for React with Base UI, for the Kitebridge Nest, a fictional baby monitor. A split behind a divider: at the start, a headline and three numbered steps for adding the widget to a page (paste one snippet, choose what to ask, approve what arrives). At the end, a framed sketch of a product page, drawn with bars and a greyscale monitor, with the widget docked at its bottom corner. The widget is a Collapsible: its tab "Review this product" folds open to two named star ratings (picture and sound, battery life; each star says "3 of 5, Good"), one line of text, an optional photo and a progress bar that counts the three parts. Send checks every part, writes each problem under its field and moves focus to the first one; a good form turns into a thanks that says nothing was sent. On a phone the page sketch goes and the widget sits under the steps. It's built from Collapsible, Rating, Field, Input, File Upload, Progress, Frame, Guides and Shine Button, with your theme's tokens for every colour.
FAQ
Is this a real embeddable script?
No. The steps beside the sketch describe how a shop would add a widget like this; nothing here loads a script or sends a request. The widget is local state: Send shows a thanks that says "Nothing was sent in this demo". To make it real, post draft to your reviews inbox where submit says so.
What happens to the photo?
Nothing is read or uploaded. The drop zone takes one image up to 5 MB and lists only its name and size, with a remove button; no thumbnail is drawn. A file that is not an image or is too big is refused with a line saying which file and why.
What does the tab do?
It is a Collapsible trigger inside a heading: press it to fold the widget shut and press again to open it. The widget starts open so the form is visible. What you typed stays when it folds shut, because it lives in state and not in the closed panel.
What does the progress bar count?
Three parts: the picture and sound rating, the battery rating and a line of at least three characters. partsDone counts them from the draft, and the bar and the "2 of 3 done" line both come from it. The photo is optional and does not count.
Related
- 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
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
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
Summary Header Reviews
Score summariesThe header of a product's reviews page: the product name, a Write a review button that opens a real form in a dialog, and a three-cell band with the score, the share that recommend it and five distribution rows.
- Pro
Star Rating Feedback Contact
Support and feedbackA product feedback form for a roadmap tool in a card in card: five named stars with a word that follows the choice, switch-on topic chips and a message, ending in a confirmation that lists what was chosen.