shadcn.io is not affiliated with official shadcn/ui
Rating and Laurels Trust Bar Awards Block for Svelte
One trust line: a read-only rating with its score and review count, three small laurels with their awards, and a ghost link to all the recognition.
Installation
Overview
A trust bar for Svelte with Ark UI, joining a rating and recognition on one line. Under the page's top rule, a read-only star rating in the foreground tone sits beside its score in words ("4.8 out of 5") with the review count under it ("from 2,310 reviews on 4 sites"), a hairline divider follows, then three small drawn laurels each with an award and the programme and year that gave it, a second divider and a ghost link, "See all recognition". The count is summed from four typed review sources and the score is their weighted average, so the figures always agree. On a phone the parts stack, the rating first. It is built from Rating, Button and Guides. The awards and programmes are made up for the example: swap AWARDS for your own, and use only recognition you have actually received. The four review sites are not named: only their counts and ratings are typed.
FAQ
Where do the score and the count come from?
From SOURCES, an array of four review sites with a count and a rating. The count is their sum, the score their average weighted by count and rounded to one decimal, and the stars are drawn to the nearest half. Change the array and every figure follows.
Can a visitor change the rating?
No. The stars are a read-only drawing hidden from assistive technology and taken out of the tab order; the words beside them say the score.
Where does the link go?
To #: point it at your recognition page. It is a ghost button with an arrow that turns around in a right-to-left page.
The button's asChild receives its props: spread them onto your router's link.
Are the awards real?
No. The programmes are invented for the example. Each laurel is a drawing hidden from assistive technology, and the award, programme and year are text.