Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Enterprise Testimonials with Fact Sheets Block for Radix UI

Three enterprise customers in cells that share their hairlines, each a quote above a fact sheet that is always in view (seats, regions and weeks to roll out), with a closing band that holds a Shine Button and a second action.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show the scale behind a quote, in a testimonials section for React with Radix UI. A compact header opens the section, and under it three cells share their hairlines on wide screens, each opening with a chip for the kind of company, then the customer's quote with their initials, name and role, and under a rule a three-figure fact sheet: seats, regions and the length of the rollout. The facts are always in view, so a buyer sees "22,000 seats, 14 regions, 9 weeks" without clicking anything. The fact sheets sit at the foot of their cells, so they line up however long the quotes run. A closing band under the cells, with + marks at its corners, holds the Shine Button and a second action as links for Girder, a fictional component platform. It is built from Badge, Avatar, Guides, Shine Button and Button, with CSS entrances that stay still under reduced motion and your theme's tokens only.

FAQ

How do I change the customers and their facts?

Edit CUSTOMERS at the top of the file: a company, a kind, the quote with its person, and the numbers seats, regions and rollout (in weeks). factsOf turns them into the three figures, with the seat count written by a fixed en-US number format. To show other facts, change the figures factsOf returns. Only put real numbers here.

Why are the facts always visible, not behind a toggle?

For this kind of buyer the scale is the proof, so it stays on the page where it can be read, printed and found. If you would rather keep cells compact, the detail-expand block hides a profile behind a button instead.

How do the cells line up?

The list is a CSS grid with one-pixel gaps over the border colour, so the cells share their lines. Each cell is a column that pushes its fact sheet to the bottom, so the fact sheets sit on one line however long the quotes run. On smaller screens the cells stack.

What do screen readers read?

Each cell is a list item: the chip, the quote as a figure with a caption naming the person and role, and then the facts as a description list, each label followed by its value. The avatars are decorative. The only heading is the section's h2.

Does it work in right-to-left languages?

Yes. The numbers are wrapped in bdi, so 22,000 and "9 weeks" keep their order, the three figures run in the reading direction with their dividers on the start side, and the spacing uses logical properties.