Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Rate a Picture Rating Gallery Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A rating gallery for Solid with Ark 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.

Why are the stars not yellow?

Colour is kept for one action on the page. The stars follow the theme's foreground, outlined when empty and filled when chosen.

How does it fit on a phone?

Two cells across with smaller stars; the picture, the name, the average and the stars all stay in view in each cell, and nothing scrolls sideways at 320 pixels.

All 100 gallery blocks