shadcn.io is not affiliated with official shadcn/ui
Enterprise Testimonials with Fact Sheets Block for React
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.
Installation
Overview
Show the scale behind a quote, in a testimonials section for React with Base 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.
Related
- 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
Expandable Profile Testimonials
Expand, flip, pinThree customer cells that expand in place into a profile, each a hairline box with a + mark, under a compact header with a Shine Button: a two-line quote when closed, the whole quote plus industry, team size, plan and time as a customer when open.
- Pro
Sortable Results Table Testimonials
Results and figuresA 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
Before and After Testimonials
Results and figuresTwo quotes from one customer, the first week and month six, as two cells with a connector between them that holds the person and what changed, each change worked out from its before and after.
- Pro
Company Logos Testimonials
Logos and facesEight customer wordmarks of an inventory app as tabs in a bordered grid that shares its hairlines: choose a company to read its quote, who said it and the one result it points to, in a raised card inside a tinted shell, under a header with a Shine Button.
- Pro
Team Tiers With Avatar Clusters
Seats and teamsThree team-size plans, each opening with a cluster of avatars sized to its host range, then its per-host price, a call to action and its features, with a segmented plan switcher on a phone.