shadcn.io is not affiliated with official shadcn/ui
Inline Metric Testimonials Block for React
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 React with Base 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 renders the link it's given with render, with nativeButton={false}.
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.
Related
- Pro
Keyword Highlight Testimonials
Filter and searchFive customer quotes about a UI kit, set large in ruled bands under keyword chips: pick one and every quote that mentions it marks the words, lights a bar and counts where it comes up.
- Pro
Highlight Quote Testimonial
One big quoteA full customer review of Copperline, a code-review tool, beside its best sentence pulled out large with the author: the same sentence carries a marker stroke in the review. One hairline band, split in two, with a Shine Button link in the header.
- Pro
Metric Testimonials
Results and figuresFour testimonials for a UI kit in one hairline band, each cell headed by its own big figure, a gain, a multiple, a drop or a new value worked out from a before and an after, with the quote and the person underneath.
- Pro
Impact Ring Testimonials
Results and figuresFour 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.
- Pro
Hero With Stats
Stats and live dataA split hero with a headline, a Shine Button and a second action beside a rail of four key figures on shared hairlines, each with its period and a small bar trend.
- Pro
Accordion Testimonials
Rows and listsCustomer stories as accordion rows beside a side header, on the page's drafting lines: each row shows the person, a one-line summary and a rating, and opens one at a time to read the full quote.