shadcn.io is not affiliated with official shadcn/ui
Proof Index Social Proof Block for React Aria
Six kinds of proof for a reference-call tool laid out like a table of contents: each row leads from the kind of proof to its number along a solid hairline, with one line of detail and a link to its source.
Installation
Overview
A social-proof block for React with React Aria, written for Vouchbook, a fictional tool that sets up reference calls between buyers and a company's customers. The heading and a short paragraph sit at the start of a split; at the end, behind the divider, six kinds of proof form an index that runs from rail to rail, like the contents page of a report. Each row leads from the kind of proof ("Analyst reports") to its number ("4.8 / 5") along a solid hairline, with a line under it saying where the number comes from, and the whole row is a link to its source. A phone stacks the heading over the index under a rule. The index starts at the top rule and ends the block, so the next block's top rule closes it. It's built from Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages and sales pages whose claims should be checkable. All the figures are example data.
FAQ
How do I change the proofs?
PROOFS holds the six rows. Each has a kind, a value, an optional unit shown quieter after the value ("/ 5", "of 12") and a detail line. Point each row's link at the page that backs it up: the kind is the link text.
How is the leader drawn?
It is an empty span with a bottom border that stretches between the kind and the number, so it sits on the text's baseline like the leaders of a table of contents. It is solid, not dotted, and hidden from assistive technology.
How does a screen reader read a row?
The index is a description list: each kind is a term, and the number and the detail are its descriptions, so a row reads "Analyst reports, 4.8 / 5, rated by three independent firms". The leader is not read.
Why is the whole row a link?
The kind's link stretches over the row, so the target is large and the hover tint covers the row. On keyboard focus a ring appears inside the row's edge.