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

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 Base UI, 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.

  • Pro

    Centered Star Rating Hero

    Testimonials

    A showcase centered hero led by its review score, with five stars and the average, a Shine Button, review-site badges and three reviews below in cells whose hairlines overshoot their corners.

  • Pro

    Avatar Stack Side Rail Hero

    Logos and social proof

    A compact hero for a community: a headline, a Shine Button and a second action beside a side rail of proof: a stack of member avatars over a line of social proof, then three stats in ruled rows.

  • Pro

    Centered Trusted By Logo Row Hero

    Logos and social proof

    A compact centered hero built as bands: an announcement pill, a headline, two calls to action and three trust points, then a ruled label and a row of six customer wordmarks in divided cells.

  • Pro

    Centered Logo Cloud Hero

    Logos and social proof

    A compact centered hero for a planning tool: an announcement link, two calls to action and a trusted-by band across the column of eight customer wordmarks in cells that share their hairlines.

  • Pro

    Hero With Stats

    Stats and live data

    A split hero with a headline, a Shine Button and a second action beside a rail of four key figures on shared hairlines, each with its period and a small bar trend.

  • Pro

    Featured Testimonial Hero

    Testimonials

    A compact start-aligned hero with a headline, a Shine Button and an outline action over a closing band that holds one customer's quote, large, beside their rating, name, role and the number it is about.

All 150 hero blocks