shadcn.io is not affiliated with official shadcn/ui
Inline Rating Widget Reviews Block for React
Rate in place in a list of recipes: each ruled row shows its community average and a Rate button that opens a popover with named stars, an optional line and Save; after saving, the row shows your stars with Edit.
Installation
Overview
An inline rating list for React with Base UI, for Mossworth, a fictional recipe box app. A start-aligned header sits over four recipes as ruled rows that run rail to rail. Each row shows the recipe's name and time, its community average (stars, the figure and the count, worked out from typed totals), a line saying whether you have rated it, and a Rate button. Rate opens a small popover: five named stars you can set with the arrow keys, an optional line for yourself with a character count, and a Save rating button. Saving with no rating is refused under the stars and focus goes to the first star; a good save closes the popover, the row now says "You gave it 4 stars" and its button reads Edit, and a polite line under the list says what was kept and that nothing was sent. On a phone the popover takes the width of the screen. It's built from Popover, Rating, Field, Input, Guides, Button and Shine Button, with your theme's tokens for every colour.
FAQ
Does my rating change the community average?
No, and the page says so by keeping them apart: the average and the count come from given and ratings in RECIPES, and your rating shows in its own line. To fold yours in, add it to both numbers where save runs (the quick rating block shows that sum).
Is anything sent?
No. Saving updates local state and the polite line says "Nothing was sent in this demo". The note is kept in state too and shows again if you press Edit. To store ratings, post id, rating and note where save is called.
How does the popover work with the keyboard?
Rate opens it and focus moves inside, to the stars. Arrow keys change the rating, Tab reaches the line and Save, Escape closes it and returns focus to the Rate button. An unsaved draft is dropped on close; opening it again starts from what was kept.
Related
- 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
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
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
Star Rating Grid Reviews
Criteria and compareEight hand tools compared at a glance in a grid on shared hairlines, each with a drawing, stars, the average and count, and the share that recommend it, sorted by a Select and with a hover card of category scores.
- Pro
Compact List Reviews
Lists and pagesTwelve one-line reviews of a notes app as a real table with sortable column heads, a Select that mirrors the sort, and nothing to open.
- Pro
Docked Widget Collection Reviews
Ask and writeA 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.