shadcn.io is not affiliated with official shadcn/ui
Docked Widget Collection Reviews Block for React Aria
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 React Aria, 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.