shadcn.io is not affiliated with official shadcn/ui
Proof Index Social Proof Block for React
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 Base UI, 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.
Related
- Pro
Mention Tally Customer Love
CustomersWhat customers mention most for a review-monitoring tool: six themes ranked with a bar to scale and a count, each opening two word-for-word snippets, with the tally derived from the typed reviews.
- Pro
Rosette Rating Badges About
CustomersFour review-site ratings for a booking tool, each a drawn rosette with the score in its middle over the site's name, a read-only star rating and its review count, in framed cells.
- Pro
Hover Card Customer Logos
CustomersTwelve drawn customer wordmarks for a parcel-logistics company in cells that share their hairlines, each opening a hover card with the shop's trade, how long it has been a customer and what it sends.
- Pro
Tabbed Plaque Shelf Awards About
Press and recognitionA recognition shelf for a grant platform in two tabs: six plaques with a drawn laurel, the prize, who gave it and the year won, or six certifications with a stamped ring and when each renews.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
Rating Breakdown Testimonials
Ratings and reviewsA review summary whose histogram rows are filter buttons: press a star row and the featured reviews narrow to that rating, with a live count and an empty state.