shadcn.io is not affiliated with official shadcn/ui
Inline Rating Widget Reviews Block for Vue
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 Vue with Ark 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.