shadcn.io is not affiliated with official shadcn/ui
Inline Metric Testimonials Block for Solid
Four customer quotes in ruled bands where the result sits inside the sentence as a chip: an arrow and the change in percent, worked out from the two figures the customer gives.
Installation
Overview
Put the number where the customer says it, for Solid with Ark UI. A compact header (a heading, one sentence and a Shine Button) leads into four bands ruled to the page's side lines, each with a + where the rule meets them. In every band the sentence is set large with the person beside it, and right after the figures a small outlined chip shows the change as an arrow and a percentage, so the proof point reads at a glance without leaving the story. The percentage isn't typed: it's worked out from the "from" and "to" figures in the data, so a quote can never claim a different result than its numbers. It's built from Badge, Avatar and Shine Button with Lucide's arrows, and your theme's tokens. For landing pages and case-study indexes where every customer has a different number and you want the sentence and the proof in one line.
FAQ
How do I change the quotes and figures?
Edit QUOTES at the top of the file. Each quote has a lead, the from and to figures with a unit, and an after; the sentence is assembled in that order, and the chip's direction and percentage come from from and to. If the figure goes down the arrow points down, and if it goes up it points up. The chip is neutral on purpose, so a fall in response time and a rise in members look alike: the sentence says which is good news.
How is the percentage calculated?
It's the difference between the two figures as a share of the starting figure, rounded down to a whole percent, with integer arithmetic so it never drifts by a point. For example, 45 to 17 is a 62% fall. Thousands separators use a fixed US-English number format, so the server and the browser always agree.
How do screen readers read it?
The sentence reads as one run of text, and the chip adds "down 62%" or "up 45%" in brackets, since the arrow is decoration. Each quote is a figure with a blockquote and a figcaption, and the four quotes are a list named "Customer results". The chip is an annotation worked out by the block, not words the customer said, so keep the brackets if you adapt the wording.
What happens when a sentence wraps, and on a phone?
The chip sits inline in the text and wraps with it. The line spacing is generous so the chip never touches the lines above and below. From md the person sits in a 13rem column at the start of the band; below that they sit under the sentence, so on a phone each band is just the sentence and a caption, four of them in a row.
Where does the button go?
It's a link (href="#") in the header row: point it at your case studies. It's the block's only button.
The button's asChild receives its props: spread them onto your router's link.
Does it work in right-to-left languages, and are the quotes real?
The figures and the percentage sit in a bdi, so "62%" and "1,740" keep their order next to Arabic or Hebrew text, the whole quote is isolated so the quotation marks stay at its ends, and the person's column moves to the right. Translate the lead, unit and after strings. The people, companies and figures are made up for the demo: replace them with real customers, and only publish a number the customer has given you permission to use.