shadcn.io is not affiliated with official shadcn/ui
Impact Ring Testimonials Block for Svelte
Four impact rings in a reverse split: each result is a share worked out from the customer's own counts, drawn as a ring with its percentage inside, in cells that share hairlines beside a header with a Shine Button.
Installation
Overview
Turn four percentages into four small dials, in a testimonials section for Svelte with Ark UI. A header column at the end holds the heading, a sentence and a Shine Button, set off by a divider with a + where it meets the top rule. At its start, a two by two of cells shares its hairlines: each is a ring filled to its share with the percentage in the middle, a line saying what it is a share of ("of pull requests merged the same day"), the counts it came from, and under that a one-line verdict with the person's initials, name and role. The rings are drawn in the text colour, so the button is the one primary control. On a phone the header comes first and each ring sits beside its figures, so four results stay compact. It is built from Circular Progress, Avatar and Shine Button with your theme's tokens, and nothing in it moves. For landing pages and customer pages where a few percentages are the whole argument.
FAQ
How do I use my own results?
Edit IMPACTS at the top of the file. Each has a part and a whole (182 of 200), what they count (items), what happened to them (label) and a one-line quote with its person. The percentage, the ring's fill and the "182 of 200" line are all worked out from those two numbers with whole-number maths, so they can never disagree. Only put real counts here, and say where they come from.
How is the ring drawn?
Circular Progress draws an SVG ring with a track and a rounded arc whose length is the percentage. The ring is decoration: the figure in the middle is real text laid over it, so it is read, selected and translated like any other text, and it stays sharp at any size.
What do screen readers read?
The rings are hidden from assistive technology. Each result reads as its percentage, its sentence ("of pull requests merged the same day"), the counts, and then the quote as a figure with a caption naming the person. The four results are a list named "Results, in the words of the people who counted them". Nothing is read twice.
How is the block laid out, and what happens on narrower screens?
From lg the page column is two tracks: the cells on the start side and a 21rem header column on the end side, which comes first in the source so the heading is read first. The cells go two across from sm and one per row below that. Rows share their height, so rings, sentences and names line up even when a line wraps. The divider and its + mark only draw once the columns sit side by side.