Shadcn Hero Section: Six Layouts That Work at 390px

You need a shadcn hero section for a landing page: the first screen a visitor sees, the one that decides whether they scroll or leave. Galleries have plenty of them. As of November 6, 2026, shadcnblocks (opens in a new tab) lists 292 hero blocks, the 21st.dev shadcn hero collection (opens in a new tab) says it has 59 and Tailark (opens in a new tab) offers 16 variants. A gallery card shows how a hero looks at desktop width. It does not show how the hero behaves on a 390px phone, what its picture does to load time or what screen readers hear. That is what this guide covers.

We use the Wingo UI Hero Section for the examples. We build that library, so we are not neutral, but every snippet below uses the real props.

What makes a hero section convert?

Four things, in this order, and nothing else above the fold:

1. One promise. The h1 names the outcome ("Send invoices in 30 seconds, get paid in days"). Three benefits joined with commas are three promises, and none of them lands. The description under it says who it is for.
2. Two actions. The primary one is the commercial step: start, sign up, install. The secondary one asks for less: a demo, pricing, the docs. A third button splits the click and stacks into a wall on a phone.
3. Proof. A short line of evidence close to the buttons: a customer count, a rating, a row of logos. It has to be true. More on that below.
4. A picture of the product. Show what the visitor would be using, not a stock illustration. Tailark's hero guide (read November 6, 2026) makes the same point: the visual should prove the shape of the product.

The hero section examples in most galleries get points 1 and 2 right. Where they differ is points 3 and 4, and the phone layout.

How do you add a React hero section component to Next.js?

Install the block with the CLI, which copies components/blocks/hero-section.tsx and the files it imports (Button, Avatar, Marketing Section and the link, motion and tone helpers) into your project as source. The Hero Section is a Pro block, so sign the CLI in to a Pro account first:

npx wingo-ui@latest login
npx wingo-ui@latest add hero-section

It is a Tailwind hero section in plain TSX: every color is a semantic token and every class sits in the file, so you can edit it like your own code. Then replace the sample copy with your own. Pass the Next.js Link so both actions and the announcement pill navigate client side:

// app/(marketing)/page.tsx
import Link from "next/link"
import { HeroSection } from "@/components/blocks/hero-section"

export default function HomePage() {
  return (
    <HeroSection
      linkComponent={Link}
      layout="split"
      ctaTone="brand"
      announcement="Recurring invoices are live"
      announcementHref="/changelog"
      title="Send invoices in 30 seconds, get paid in days"
      description="Ledgerly turns a client and an amount into a paid invoice, with reminders that go out on their own."
      labels={{ primary: "Start for free", secondary: "See pricing" }}
      hrefs={{ primary: "/sign-up", secondary: "/pricing" }}
      socialProof={false}
    />
  )
}

socialProof={false} is deliberate. The default proof line reads "Loved by 12,000 teams" and "4.9/5 from 2,300 reviews", which are sample numbers for the fictional Acme. Turn it off until you have real ones, then set them through labels.proof, labels.rating and labels.ratingLabel, and the faces through avatars. A made-up rating on a real product is a fast way to lose a skeptical developer.

The title renders as an h1 by default. If the hero is not the first heading on the page, set headingAs="h2".

Which hero layout should you pick?

The layout prop has six values. Pick by what your picture needs to explain, then check the phone column, because that is the layout most of your visitors see.

In every layout the two buttons stack full width below 640px, at 48px tall, so both are easy thumb targets. The announcement pill truncates long text instead of wrapping and grows to 44px on touch screens. The title starts at 34px on phones and steps up to 56px from 1024px; the editorial cover title scales fluidly with clamp() between 44px and 96px.

Why draw the product shot in code instead of a screenshot?

Because a drawn shot costs no image request, follows the theme and fits any width. In the centered, split and stacked layouts the default media is ProductMockup: a browser frame holding a small project board, drawn with the theme tokens (the media layout draws a whole workspace, the terminal layout a terminal). That choice has three practical effects.

• No image on the critical path. web.dev's Largest Contentful Paint guide (opens in a new tab) (checked November 6, 2026) counts images, video posters, CSS url() backgrounds and text blocks as LCP candidates, and sets the good threshold at 2.5 seconds or less. A drawn mockup is plain markup, so the largest element is usually the h1 text, which arrives with the HTML.
• It follows the theme. A screenshot taken in light mode glares inside a dark page. The drawn board uses bg-surface, bg-foreground/5 and the tone, so it matches both.
• It fits any width. The mockup folds its sidebar, columns and chart with container queries based on its own width, so it fits a split column and a 360px phone without scrolling sideways.

The entrance animation does not hurt either. The hero rises in only when it mounts on the client after hydration; the server HTML is final and visible, and animateIn={false} or reduced motion skips it.

A real screenshot is still the honest choice once your UI is stable. Wrap it in the exported BrowserFrame, load it eagerly because it is above the fold, and give it sizes so a phone does not download a desktop-width file:

import Image from "next/image"
import { BrowserFrame, HeroSection } from "@/components/blocks/hero-section"

<HeroSection
  layout="split"
  media={
    <BrowserFrame url="app.ledgerly.com/invoices">
      <Image
        src="/hero/invoices.png"
        alt="The Ledgerly invoice list with three paid invoices and one overdue"
        width={1600}
        height={1000}
        sizes="(min-width: 1024px) 50vw, 100vw"
        loading="eager"
        fetchPriority="high"
        className="h-auto w-full"
      />
    </BrowserFrame>
  }
/>

Skip the old priority prop. Next.js 16 deprecates it in favor of preload, and the Image docs (opens in a new tab) recommend loading="eager" or fetchPriority="high" over preload in most cases.

How do you add a rotating word to the headline?

title takes any React node, so you can drop the Text Rotate component into it. It swaps one word every 2.5 seconds by default while the sentence reflows around it:

npx wingo-ui@latest add text-rotate

import { TextRotate } from "@/components/ui/text-rotate"

<HeroSection
  title={
    <>
      Invoices that get paid{" "}
      <TextRotate words={["faster", "on time", "in full"]} tone="brand" highlight="pill" />
    </>
  }
/>

Keep it honest and short. The sentence must make sense with the first word alone, because that is what a screenshot, a link preview and a visitor with reduced motion see (the current word simply stays). Three words is plenty. Screen readers hear the full list once from a visually hidden span, and the rotation waits while the tab is hidden or the headline is off screen.

How do you put a pattern behind the hero?

Start with the built-in background prop: glow (the default, a soft light in the tone), grid, mesh or none. If you want dots, diagonal stripes or a pointer spotlight, use the Background Pattern in a positioned wrapper and turn the hero's own background off, so the two do not stack:

import BackgroundPattern from "@/components/ui/background-pattern"

<div className="relative isolate">
  <BackgroundPattern pattern="dots" fade="radial" highlight="pointer" />
  <HeroSection background="none" />
</div>

The pattern paints at 15% of the foreground color, so it reads in light and dark mode without new tokens. The pointer spotlight only runs on fine pointers, so phones never pay for it, and the optional animated pulse stops under reduced motion and while the hero is scrolled out of view.

Where does the logo cloud go?

Right under the hero, so the proof sits next to the promise. The Logo Cloud is free:

npx wingo-ui@latest add logo-cloud

import Link from "next/link"
import { LogoCloud } from "@/components/blocks/logo-cloud"

<LogoCloud
  linkComponent={Link}
  layout="marquee"
  title="Used by finance teams at"
  logos={[
    { name: "Northwind", href: "/customers/northwind" },
    { name: "Globex", href: "/customers/globex" },
    { name: "Initech", href: "/customers/initech" },
  ]}
/>

The names above are placeholders, and the default LOGO_CLOUD_SAMPLE is eight fictional companies. Replace them with customers who agreed to be listed. Logos with an href become links through linkComponent. The grid layout wraps to two columns on phones; the marquee scrolls one row in pure CSS, pauses under the pointer and while a logo link has focus, and becomes a still wrapped row under reduced motion.

What breaks on a 390px phone?

Usually one of four things: the first screen, the announcement, the picture or the proof line. Check them before you ship, on a real phone if you can:

• The first screen. Headline, description and both buttons should be visible without scrolling. If they are not, cut the description, not the buttons. Avoid a fixed h-screen hero: phone browser bars change the viewport height, which our guide to 100vh on mobile explains.
• The announcement. Keep it to a few words; on a phone, longer text is cut off with an ellipsis.
• The picture. Nothing in it may force a horizontal scroll. Screenshots need w-full h-auto; wide tables or code inside the shot need to fold or clip.
• The proof line. It sits under the buttons, and on a narrow phone the avatars and the rating can wrap onto two lines. Make sure it still reads as one statement.

What comes after the hero?

The sections that carry the rest of the pitch. The Next.js SaaS landing page guide covers the sections under it, the shadcn navbar guide covers the bar above it, the AI SaaS landing page template shows a hero whose demo answers a prompt, and the Landing Page template composes all of them with this Hero Section already in place. More full screens live in the Build it category, starting from its pillar, the Next.js admin dashboard tutorial.

The Hero Section, Text Rotate and Background Pattern come with Pro ($8 a month, $80 a year or $150 once); the Logo Cloud is free with a free account. Install the hero with npx wingo-ui@latest add hero-section, write your one promise, and look at it at 390px before you look at it on your monitor.

FAQ

What should a hero section include?

A headline with one promise, a sentence that says who it is for, a primary action, a lower-commitment secondary action, a line of proof and a picture of the product. Everything else, like feature lists and pricing, belongs further down the page.

Does shadcn/ui have a hero section component?

No. As of November 2026 the official shadcn/ui blocks cover sidebars, login and signup screens, not heroes. Hero sections come from galleries built on shadcn/ui or from libraries like Wingo UI, which installs its Hero Section with npx wingo-ui@latest add hero-section.

How tall should a hero section be on mobile?

Tall enough for the headline, the description and both buttons on the first screen, with the product picture allowed to start below it. Avoid a fixed 100vh hero on phones: the browser bars change the viewport height, and the content of a full-height hero gets cut off or jumps.

Should the hero image be a screenshot or drawn in code?

A real screenshot shows the actual product and is the honest choice once the UI is stable. A drawn mockup adds no image download, follows light and dark mode and stays sharp at any size, which suits early products and pages where the UI changes every week.

Is the Wingo UI Hero Section free?

No. The Hero Section, Text Rotate and Background Pattern are Pro items, and Pro costs $8 a month. The Logo Cloud is free with a free account, as are the Button, Avatar and Marketing Section that the Hero Section builds on.