# Shadcn Hero Section: Six Layouts That Work at 390px

> Build a shadcn hero section that converts: one promise, two actions, proof above the fold and a product shot drawn in code, with each layout checked at 390px.

- Author: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Published: Nov 6, 2026
- Category: [Build it: screens and apps](https://wingo-ui.com/blog/category/build)
- Reading time: 8 min
- Canonical: https://wingo-ui.com/blog/shadcn-hero-section

## TL;DR

A shadcn hero section that converts makes one promise in the h1, offers two actions (the sign-up and a lower-commitment second step), puts true proof next to the buttons and shows the product. The Wingo UI Hero Section covers all four in six layouts and draws its default product shot with theme tokens, so it follows dark mode and adds no image request. On a 390px phone both actions stack full width at 48px tall and no layout scrolls sideways.

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](https://www.shadcnblocks.com/blocks/hero) lists 292 hero blocks, the [21st.dev shadcn hero collection](https://21st.dev/community/components/explore/shadcn-hero-section) says it has 59 and [Tailark](https://pro.tailark.com/blog/hero-section) 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](https://wingo-ui.com/components/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:

```bash
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:

```tsx
// 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.

| Layout | Best for | At 390px |
|---|---|---|
| `centered` | simple products with one clear action | copy centered, buttons stacked full width, the product shot under them |
| `split` | a workflow the picture explains | copy first, the shot under it (side by side from 1024px) |
| `stacked` | long titles next to a short pitch | title, then description and buttons, then the shot |
| `editorial` | content sites, agencies, no product UI | large start-aligned type, key facts in a two-column grid, no mockup |
| `media` | when the product UI is the proof | the drawn workspace on top, the copy card under it, overlapping its bottom edge |
| `terminal` | CLIs, APIs, developer tools | copy, then a drawn terminal with an install and an API call |

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.

> Live demo (Hero Section): The media layout with a brand primary action. On a phone or in a narrow window, the drawn workspace stays on top and the copy card moves under it, with both buttons stacked full width. Try it at [Hero Section](https://wingo-ui.com/components/hero-section) and install it with `npx wingo-ui@latest add hero-section`.

## 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](https://web.dev/articles/lcp) (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:

```tsx
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](https://nextjs.org/docs/app/api-reference/components/image) 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](https://wingo-ui.com/components/text-rotate) component into it. It swaps one word every 2.5 seconds by default while the sentence reflows around it:

```bash
npx wingo-ui@latest add text-rotate
```

```tsx
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.

> Live demo (Text Rotate): Each word flips in letter by letter inside a brand pill. Hover the word to hold it, because pauseOnHover is on here. Try it at [Text Rotate](https://wingo-ui.com/components/text-rotate) and install it with `npx wingo-ui@latest add text-rotate`.

## 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](https://wingo-ui.com/components/background-pattern) in a positioned wrapper and turn the hero's own background off, so the two do not stack:

```tsx
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](https://wingo-ui.com/components/logo-cloud) is free:

```bash
npx wingo-ui@latest add logo-cloud
```

```tsx
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.

> Live demo (Logo Cloud): Hover the row to pause it, or Tab to a logo link: the marquee stops while it has focus. Try it at [Logo Cloud](https://wingo-ui.com/components/logo-cloud) and install it with `npx wingo-ui@latest add logo-cloud`.

## 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](https://wingo-ui.com/blog/100vh-mobile-dvh-tailwind) 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](https://wingo-ui.com/blog/nextjs-saas-landing-page) covers the sections under it, the [shadcn navbar guide](https://wingo-ui.com/blog/shadcn-navbar) covers the bar above it, the [AI SaaS landing page template](https://wingo-ui.com/blog/ai-saas-landing-page-template) shows a hero whose demo answers a prompt, and the [Landing Page template](https://wingo-ui.com/templates/landing-page) composes all of them with this Hero Section already in place. More full screens live in the [Build it category](https://wingo-ui.com/blog/category/build), starting from its pillar, the [Next.js admin dashboard tutorial](https://wingo-ui.com/blog/nextjs-admin-dashboard-tutorial).

The Hero Section, Text Rotate and Background Pattern come with [Pro](https://wingo-ui.com/pricing) ($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.

## Components in this post

- [Hero Section](https://wingo-ui.com/components/hero-section) (Pro): A React hero section for a landing or product page: an announcement pill, a big title, two actions, social proof and a product shot drawn in code. Install: `npx wingo-ui@latest add hero-section`
- [Text Rotate](https://wingo-ui.com/components/text-rotate) (Pro): A rotating word for headlines that cycles through a list of words or short phrases in place, inside a sentence that reflows to fit each one. Install: `npx wingo-ui@latest add text-rotate`
- [Background Pattern](https://wingo-ui.com/components/background-pattern) (Pro): A decorative, theme-aware pattern layer of dots, grid, lines, diagonal stripes or crosses for heroes, cards, empty states and auth screens. Install: `npx wingo-ui@latest add background-pattern`
- [Logo Cloud](https://wingo-ui.com/components/logo-cloud) (Free): A React logo cloud of customer wordmarks under a quiet line, as a wrapping grid, an endless marquee with faded edges or a split grid. Install: `npx wingo-ui@latest add logo-cloud`

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

---

Source: https://wingo-ui.com/blog/shadcn-hero-section