shadcn.io is not affiliated with official shadcn/ui
Metric Trio With Logo Strip Logos Block for React
A benchmark for a streaming-analytics tool: three tiles that set the product against the industry average with a large figure and two bars each, a header row with two buttons, and a closing strip of eight wordmarks.
Installation
Overview
A benchmark with a customer strip, for React with Base UI. A header row puts "Ahead of the average, on every measure" and one sentence at the start and two buttons at the end: the Shine Button and an outline one. Under it three tiles share their hairlines from rail to rail, each a measure, a large figure and two thin bars: the product's in the text colour and the industry average's muted, with both values written beside them. Under the tiles a closing strip of eight customer wordmarks sits in cells that share the same hairlines, its top rule meeting the rails at + marks, and it ends the block. The tiles stack on a phone; the strip is two by four there, four across from sm and one row from xl. It's built from Guides, Button and Shine Button, with a CSS transition for the entrance and your theme's tokens for every colour. For products that can show a measured lead over their category.
FAQ
How do I change the measures?
Edit TILES at the top of the file: each entry is a label, the product's figure (ours) and the industry's (average), both whole percentages. The figure at the top and the first bar use ours; the bar's width is the percentage itself, so keep both on a 0 to 100 scale.
Are the bars accessible?
The bars are decoration: they are hidden from assistive technology, and each one has its name and value written beside it as text ("Eddyline 96%", "Industry average 62%"), so nothing depends on seeing the bar. The values are wrapped in a bdi element and the bars keep their direction in a right-to-left layout, so a longer bar is always a larger number.
How do I change the customers?
Edit CUSTOMERS: each entry is a name, an icon, a lettering and a mark (inline, badge, ring or trailing). Keep eight: they fill two columns, four columns and eight columns without a short row, and the shared hairlines never frame an empty cell.
Where do the buttons go?
Both are links (href="#"): point See the benchmark at your report and Read the method at your methodology page. See the benchmark is a Shine Button: a band of light sweeps across it once on hover and keyboard focus.
Each button renders the link it's given with render, with nativeButton={false}.
Related
- Pro
Metric Cards Bento Logos
BentosSix customer results for an invoice-financing product in two bands of cells, each with the customer's wordmark, a figure at display size, what it counts and a chip with the change since last year.
- Pro
Metric Hero Strip Logos
MetricsA giant static member count for a loyalty platform under a centred header with two buttons, then a band of three secondary figures and a closing strip of eight customer wordmarks.
- Pro
Featured Focal With Metric Trio Logos
Flagship customerA flagship customer for a billing tool in a wide framed card with the modules it runs, closed by a full-width band of three large figures: utilities, years of history and uptime.
- Pro
A start-aligned proof block for a payroll tool: a band of four figures between two hairlines, then twelve customer wordmarks as an open wall with no lines of its own.
- Pro
Ring Chart Metric Logos
MetricsA retention ring for an expense-report tool in a framed figure beside the claim and three supporting facts, with a closing strip of six customer wordmarks.
- Pro
A bento of five customers for a payments product: a flagship story across two columns beside four cells that alternate between a quote and a big figure, each led by the customer's wordmark.