shadcn.io is not affiliated with official shadcn/ui
Rating Card Widget Reviews Block for Ark UI
An embeddable rating card with a Compact, Standard and Wide switch that reshapes the same figures, and a field with the matching embed snippet and a Copy button.
Installation
Overview
A rating card widget for React with Ark UI, for the Quillline, a fictional pocket notebook. A compact header introduces two bands under their own rules. The first holds a three-way toggle, Compact, Standard or Wide, and a read-only field with the embed snippet and a Copy button; the snippet names the size you chose. The second is a tinted stage with the card itself, reshaped by the toggle: a score ring with the average inside, read-only stars and the count when it is Compact; the product name and five mini distribution bars as well when it is Standard; two review snippets under a rule when it is Wide. The stage keeps the height of the tallest card, so the page below never moves. The snippet is typed text, a placeholder element rather than a live script, and copying it changes nothing. Every figure is worked out from the typed counts at the top of the file. It's built from Toggle Group, Circular Progress, Rating, Clipboard, Button and Guides.
FAQ
How do I use my own ratings?
Edit TALLY (how many ratings gave each star rating) and SNIPPETS (the two lines the Wide card quotes) at the top of the file. The total, the average to one decimal, the stars drawn to the nearest half, the ring's fill and each row's percentage by the largest remainder method are worked out from the tally.
Does the snippet do anything?
No. snippetOf writes a typed placeholder, <div data-quillline="standard"></div>, with the size you chose; nothing here loads a script or sends a request. Replace it with the real embed code of your widget service. The Copy button writes it to the clipboard and says "Copied" or, if the browser refuses (a page not served over HTTPS), "Copy failed", and a polite line says the same.
Why does the card move when I change the size?
The card is the feature: each size is a different shape of the same card, centred in its stage. What stays put is the page: an unseen Standard and Wide card sit in the stage's cell, so its height is always the tallest one's. Block-review's shift check reports the card's own movement on a click; that is expected.
Why is the ring hidden from screen readers?
The ring only draws the average as a share of five, and the figure inside it repeats what the stars and the text beside it already say ("4.3 out of 5 from 41 ratings"). It is aria-hidden, and its stroke takes text-foreground so the section stays free of the primary colour.