shadcn.io is not affiliated with official shadcn/ui
Metric Trio With Logo Strip Logos Block for React Aria
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 React Aria. 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 a link when it has an href.