shadcn.io is not affiliated with official shadcn/ui
Rate a Picture Rating Gallery Block for React
Six dishes with a five-star rating each, a seeded average and count that your vote joins, and a Sort group for top rated and most rated.
Installation
Overview
A rating gallery for React with Base UI. Six drawn dishes sit in cells with overshoot, three across and two on a phone. Each cell has the dish, who made it, its average and number of ratings, and a five-star Rating you can set: your vote joins the seeded total, the average is worked out again to one decimal and the count goes up by one ("4.3 from 61" becomes "4.3 from 62" or a new average). A Sort group at the end of the header puts the dishes in order of top rated or most rated, and keeps that order while you vote, so a cell never moves away from under your pointer. Your votes stay on this page. The pictures are drawn in the theme's greys, never photographed, and the stars are the foreground colour. It's built from Guides, Rating and Toggle Group, with CSS transitions for the entrance. For recipe sites, product photos and any gallery you want people to rate.
FAQ
How is the average worked out?
Each dish has the stars others gave added up and the number of people who gave them. Your vote adds its stars to the total and one to the count, and the average is the total over the count, rounded to one decimal. Changing your vote replaces it, so you count once.
Why doesn't the order change when I vote?
Sorting happens when you choose Top rated or Most rated, using the averages and counts as they are at that moment, and the order then stays put. Otherwise a dish you rate could jump away before you finish. Choose the sort again, or the other one and back, to re-sort.
How do I rate with the keyboard?
Tab to a dish's stars and use the arrow keys to choose a rating from 1 to 5; each star is named like "4 of 5, Very good". A polite line says the dish, your rating and its new average.
Is my vote saved?
Not beyond this page: it is state in the block and goes nowhere. Connect rate to your service to store it.
Related
- Pro
Favorites Gallery
Select and actEight drawn prints, each in its own frame with a heart toggle, and a Favourites only switch with a count, a Clear favourites button and an empty state.
- Pro
Comment Thread Social Feed Gallery
Select and actA neighbourhood feed in a scroll area: three posts with likes, a thread that opens in place and a form that adds your comment for this visit.
- Pro
Caption Density Gallery
Rows and bandsA photo essay of five framed pictures in alternating rows, with a Short and Full switch: Short shows each title, Full adds the place, date, credit and a two-sentence story.
- Pro
Inline Expansion Thumbnail Grid
Hairline gridsSixteen drawn thumbnails on shared hairlines, eight across, where choosing one opens a preview band straight under its row with the whole picture, its source, Previous, Next and Close, without changing the block's height.
- Pro
Submission Wall Gallery
Select and actA framed wall of a camera club's six newest entries under Latest and Featured tabs, beside a real form with a handle, a caption and a file drop zone that puts your entry first as pending review for this visit, never posting anything.
- Pro
Rating Breakdown Reviews
Score summariesA review summary for a carry-on suitcase whose star rows filter the reviews: the average, the count, the share that would recommend it and a five-row distribution, beside the four most helpful reviews with a Helpful vote each.