Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Left-Aligned Social Proof Bar Hero Block for React Aria

A compact start-aligned hero closed by a three-cell social proof bar on its own rule: an avatar stack with the user count, a five-star rating with the review count and a compliance mark.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A compact, start-aligned hero for React with React Aria, here for Ledgerline, invoicing for freelancers. It has an announcement link, a large headline, a sentence and a ShineButton with an outline Button as links, closed by a three-cell proof bar that draws its own solid rule with + marks: an avatar stack with the user count, five foreground stars with the rating and review count, and a compliance mark. The cells divide with hairlines; below sm they stack. The bar's text is read as a labelled list, with the stars hidden and the rating spoken in words. Made for products that sell on trust.

FAQ

How do I change the proof figures?

They are the PROOF object and the MEMBERS array at the top of the file: the user count, the score, the review count and the compliance name. Use numbers you can back up, and keep the bar to three cells, which is what fits on one row.

How are the stars read by a screen reader?

The five stars are decorative and hidden. The rating cell reads as one sentence, “Rated 4.9 out of 5 from 2,500+ reviews”, using visually hidden words, and the numbers are in bdi so they keep their order in right-to-left text. The stars are in the foreground colour, so the primary colour stays on the button.

What if the avatar pictures don't load?

Each Avatar shows its initials as a fallback, with a foreground text colour that passes AA contrast on the avatar's tint. The pictures are decorative: the list's text gives the user count. Replace the sample pictures with your own, or set a member's src to an empty string for initials only.

Is the primary button a link?

Yes: the ShineButton is the only primary control, a link on every framework: asChild with an a on Ark and Radix, render with nativeButton={false} on Base UI, and href on React Aria. The second action is an outline Button.

How is the proof bar drawn?

A closing band: a relative box with a Guides layer for its top rule and + marks, holding a list that divides into three cells with divide-x, or divide-y on a phone. As it ends the block, the column has no bottom padding, and the next block's top rule closes it.

How does it read on a phone?

The headline steps down to text-4xl, the buttons wrap, and the three proof cells stack with a hairline between them. The button is on the first screen and the proof follows.

All 150 hero blocks