Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Centered Bouncing Scroll Indicator Hero Block for React

A compact centered hero with four figures as separate cells with overshooting hairlines and a bouncing “Scroll to explore” link at its foot.

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, centered hero for React with Base UI, here for Tessel, a database replicated to the edge. It has an announcement link, a headline, a sentence and a ShineButton with an outline Button as links, then four figures as separate cells whose hairlines overshoot their corners with + marks, and, at the foot, a quiet "Scroll to explore" link whose chevron bounces. The link goes to the id of the next section (NEXT_SECTION, #features), and the bounce stops for visitors who ask for reduced motion. The cells go two by two on phones. Made for landing pages that want an obvious way down.

FAQ

Where does “Scroll to explore” go?

To the element whose id is NEXT_SECTION, at the top of the file (#features). Change it to the id of the section after the hero. It is a real link, so it works without script, and the browser smooth-scrolls it if your page sets scroll-behavior: smooth.

Does the bounce respect reduced motion?

Yes. The chevron uses Tailwind's animate-bounce, with motion-reduce:animate-none, so it holds still for visitors who ask for it. The bounce is a loop, so it is only on the chevron and never on text.

How are the figure cells drawn?

Each is a relative list item with a Guides layer (extend="sm", + marks on its top start corner), apart from its neighbours by gap-6 so the overshoot of one never touches the next. Values are in bdi so signs and units stay in order in right-to-left text.

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.

Is this hero accessible?

One h1, links named by their text, a visible focus ring, and a list of figures a screen reader reads as label and value. The chevron is decorative. All text passes AA in light and dark.

How does it fit on a phone?

The headline steps down to text-4xl, the buttons wrap, and the four cells become two rows of two. The button is on the first screen; the figures and the scroll link follow.

  • 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

    Centered Minimal Hero

    Type and motion

    A compact centered type-only hero: a two-line headline with a muted second line, one sentence, a Shine Button and a second action, on faded rails.

  • Pro

    Counter Stats Hero

    Stats and live data

    A compact, start-aligned hero for an email API on solid rails: a headline, a Shine Button and an outline button, then four counters in separate cells whose hairlines overshoot their corners.

  • Pro

    Centered Shimmer Text Headline Hero

    Type and motion

    A compact centered hero whose second headline line glints as a light runs through it, with a launch pill, the Shine Button and four stats in cells below.

  • Pro

    Centered Radial Gradient Stats Hero

    Backdrops

    A compact centered hero under a soft monochrome glow, with the side rails fading in from the top, an announcement link, a Shine Button, an avatar row and a band of three figures.

  • 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.

All 150 hero blocks