Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Impact Ring Testimonials Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Turn four percentages into four small dials, in a testimonials section for React with Base 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.

Does it work in right-to-left languages?

Yes. The header column moves to the left and the cells to the right, text aligns to the start of each cell, and percentages and counts are wrapped in bdi, so 91% and "182 of 200" keep their order. The ring is symmetrical.

  • Pro

    Metric Testimonials

    Results and figures

    Four 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

    NPS Score Bar Testimonials

    Ratings and reviews

    A Net Promoter Score in large type beside a stacked bar of promoters, passives and detractors drawn from typed counts, in two ruled bands with a promoter's quote at display size and a Shine Button.

  • Pro

    Sortable Results Table Testimonials

    Results and figures

    A results table of five customers with a before, an after and the change between them, whose column headers sort it, in a band between the rails: a split divider sets the quote of whoever is at the top of the table apart from the table, with + marks where it meets the band's rule.

  • Pro

    Animated Count Testimonials

    Results and figures

    Three headline figures that count up to their totals when the section loads, in one hairline band with a Replay button that runs the count again, and two customer quotes in a second band beneath.

  • Pro

    Inline Metric Testimonials

    Rows and lists

    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.

  • Pro

    Left-Heavy Metric Cards Hero

    Stats and live data

    A split hero for an API host: copy and two calls to action beside a column, behind a divider, of three metric cells whose lines overshoot their corners and whose figures roll up into view.

All 100 testimonials blocks