Hero Section Beispiele für shadcn: sechs Layouts bei 390px

Du brauchst eine shadcn Hero Section für eine Landing Page: den ersten Screen, den Besucher sehen und der entscheidet, ob sie scrollen oder gehen. Hero Section Beispiele gibt es in Galerien reichlich. Stand 6. November 2026 listet shadcnblocks (opens in a new tab) 292 Hero-Blöcke, die shadcn-Hero-Sammlung von 21st.dev (opens in a new tab) nennt 59, und Tailark (opens in a new tab) bietet 16 Varianten. Eine Galerie-Karte zeigt, wie ein Hero auf Desktop-Breite aussieht. Sie zeigt nicht, wie er sich auf einem 390px breiten Smartphone verhält, was sein Bild mit der Ladezeit macht oder was Screenreader vorlesen. Darum geht es in diesem Guide.

Für die Beispiele nutzen wir die Hero Section von Wingo UI. Wir bauen diese Bibliothek und sind also nicht neutral, aber jedes Snippet unten nutzt die echten Props.

Was macht eine Hero Section, die konvertiert?

Vier Dinge, in dieser Reihenfolge, und sonst nichts im ersten Screen:

1. Ein Versprechen. Die h1 nennt das Ergebnis („Rechnungen in 30 Sekunden verschicken, in Tagen bezahlt werden“). Drei Vorteile mit Kommas aneinandergereiht sind drei Versprechen, und keins davon kommt an. Die Beschreibung darunter sagt, für wen das Produkt ist.
2. Zwei Aktionen. Die primäre ist der kommerzielle Schritt: loslegen, registrieren, installieren. Die sekundäre verlangt weniger: eine Demo, die Preise, die Doku. Ein dritter Button teilt die Klicks auf und stapelt sich auf dem Smartphone zu einer Wand.
3. Belege. Eine kurze Zeile mit Nachweisen nah an den Buttons: eine Kundenzahl, eine Bewertung, eine Reihe Logos. Sie muss stimmen. Mehr dazu unten.
4. Ein Bild des Produkts. Zeig, womit die Besucher arbeiten würden, keine Stock-Illustration. Der Hero-Guide von Tailark (gelesen am 6. November 2026) sagt dasselbe: Das Bild soll belegen, wie das Produkt aufgebaut ist.

Die meisten Hero Section Beispiele in Galerien bekommen Punkt 1 und 2 hin. Unterschiede gibt es bei Punkt 3 und 4 und beim Smartphone-Layout.

Wie baust du eine React Hero Section in Next.js ein?

Installier den Block mit der CLI. Sie kopiert components/blocks/hero-section.tsx und die Dateien, die er importiert (Button, Avatar, Marketing Section sowie die Helfer für Links, Motion und Tones), als Quellcode in dein Projekt. Die Hero Section ist ein Pro-Block, melde die CLI also vorher mit einem Pro-Konto an:

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

Es ist eine Tailwind Hero Section in reinem TSX: Jede Farbe ist ein semantisches Token, und jede Klasse steht in der Datei, du kannst sie also wie deinen eigenen Code bearbeiten. Ersetz danach die Beispieltexte durch deine eigenen. Gib den Link von Next.js mit, damit beide Aktionen und die Ankündigungs-Pill clientseitig navigieren:

// 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="Wiederkehrende Rechnungen sind live"
      announcementHref="/changelog"
      title="Rechnungen in 30 Sekunden verschicken, in Tagen bezahlt werden"
      description="Ledgerly macht aus einem Kunden und einem Betrag eine bezahlte Rechnung, mit Erinnerungen, die von selbst rausgehen."
      labels={{ primary: "Kostenlos starten", secondary: "Preise ansehen" }}
      hrefs={{ primary: "/sign-up", secondary: "/pricing" }}
      socialProof={false}
    />
  )
}

socialProof={false} ist Absicht. Die Standard-Zeile mit Belegen lautet „Loved by 12,000 teams“ und „4.9/5 from 2,300 reviews“, das sind Beispielzahlen für die fiktive Firma Acme. Schalte sie ab, bis du echte Zahlen hast, und setz diese dann über labels.proof, labels.rating und labels.ratingLabel, die Gesichter über avatars. Eine erfundene Bewertung auf einem echten Produkt verspielt das Vertrauen skeptischer Entwickler schnell.

Der Titel wird standardmäßig als h1 gerendert. Ist der Hero nicht die erste Überschrift der Seite, setz headingAs="h2".

Welches Hero-Layout solltest du nehmen?

Die Prop layout hat sechs Werte. Wähl danach, was dein Bild erklären soll, und prüf dann die Spalte für Smartphones, denn dieses Layout sehen die meisten deiner Besucher.

In jedem Layout stapeln sich die beiden Buttons unter 640px in voller Breite und 48px Höhe, beide sind also gut mit dem Daumen zu treffen. Die Ankündigungs-Pill kürzt langen Text, statt umzubrechen, und wächst auf Touchscreens auf 44px. Der Titel beginnt auf Smartphones bei 34px und steigt ab 1024px auf 56px; der Cover-Titel im Editorial-Layout skaliert fließend mit clamp() zwischen 44px und 96px.

Warum das Produktbild in Code zeichnen statt einen Screenshot nehmen?

Weil ein gezeichnetes Bild keinen Bild-Request kostet, dem Theme folgt und in jede Breite passt. Im Centered-, Split- und Stacked-Layout ist das Standard-media das ProductMockup: ein Browserfenster mit einem kleinen Projekt-Board, gezeichnet mit den Theme-Tokens (das Media-Layout zeichnet einen ganzen Workspace, das Terminal-Layout ein Terminal). Diese Entscheidung hat drei praktische Folgen.

• Kein Bild auf dem kritischen Pfad. Der Guide zum Largest Contentful Paint (opens in a new tab) von web.dev (geprüft am 6. November 2026) zählt Bilder, Video-Poster, CSS-Hintergründe mit url() und Textblöcke zu den LCP-Kandidaten und setzt die Schwelle für „gut“ bei 2,5 Sekunden oder weniger. Ein gezeichnetes Mockup ist reines Markup, das größte Element ist also meist der Text der h1, und der kommt mit dem HTML.
• Es folgt dem Theme. Ein im Light Mode aufgenommener Screenshot blendet auf einer dunklen Seite. Das gezeichnete Board nutzt bg-surface, bg-foreground/5 und den Ton, es passt also zu beiden.
• Es passt in jede Breite. Das Mockup klappt Sidebar, Spalten und Chart per Container Queries je nach eigener Breite ein. So passt es in eine Split-Spalte und auf ein 360px breites Smartphone, ohne seitwärts zu scrollen.

Auch die Einblend-Animation schadet nicht. Der Hero gleitet nur dann herein, wenn er nach der Hydration auf dem Client mountet; das HTML vom Server ist fertig und sichtbar, und animateIn={false} oder reduzierte Bewegung überspringt die Animation.

Ein echter Screenshot ist trotzdem die ehrliche Wahl, sobald deine UI stabil ist. Pack ihn in den exportierten BrowserFrame, lad ihn sofort statt lazy, weil er im ersten Screen liegt, und gib ihm sizes, damit ein Smartphone keine Datei in Desktop-Breite herunterlädt:

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="Die Rechnungsliste von Ledgerly mit drei bezahlten und einer überfälligen Rechnung"
        width={1600}
        height={1000}
        sizes="(min-width: 1024px) 50vw, 100vw"
        loading="eager"
        fetchPriority="high"
        className="h-auto w-full"
      />
    </BrowserFrame>
  }
/>

Lass die alte Prop priority weg. Next.js 16 markiert sie als veraltet und ersetzt sie durch preload, und die Image-Doku (opens in a new tab) empfiehlt in den meisten Fällen loading="eager" oder fetchPriority="high" statt preload.

Wie baust du ein wechselndes Wort in die Headline ein?

title nimmt jeden React-Node an, du kannst also die Komponente Text Rotate hineinsetzen. Sie tauscht standardmäßig alle 2,5 Sekunden ein Wort aus, und der übrige Satz fließt um das Wort herum neu:

npx wingo-ui@latest add text-rotate

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

<HeroSection
  title={
    <>
      Rechnungen, die{" "}
      <TextRotate words={["schneller", "pünktlich", "vollständig"]} tone="brand" highlight="pill" />{" "}
      bezahlt werden
    </>
  }
/>

Bleib ehrlich und kurz. Der Satz muss schon mit dem ersten Wort allein Sinn ergeben, denn genau das sehen ein Screenshot, eine Link-Vorschau und Besucher mit reduzierter Bewegung (dort bleibt einfach das aktuelle Wort stehen). Drei Wörter reichen völlig. Screenreader hören die ganze Liste einmal aus einem visuell versteckten Span, und die Rotation pausiert, solange der Tab verborgen ist oder die Headline außerhalb des Bildschirms liegt.

Wie legst du ein Muster hinter den Hero?

Fang mit der eingebauten Prop background an: glow (der Standard, ein weiches Licht im Ton), grid, mesh oder none. Willst du Punkte, diagonale Streifen oder einen Spotlight-Effekt unter dem Mauszeiger, nimm das Background Pattern in einem positionierten Wrapper und schalte den eigenen Hintergrund des Heroes ab, damit sich die beiden nicht überlagern:

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

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

Das Muster nutzt die Vordergrundfarbe zu 15%, es ist also im Light und Dark Mode lesbar, ohne neue Tokens. Der Spotlight läuft nur bei feinen Zeigern wie einer Maus, Smartphones zahlen also nie dafür, und das optionale Pulsieren mit animated stoppt bei reduzierter Bewegung und solange der Hero aus dem Bild gescrollt ist.

Wohin gehört die Logo Cloud?

Direkt unter den Hero, damit die Belege neben dem Versprechen stehen. Die Logo Cloud ist kostenlos:

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="Im Einsatz bei Finanzteams von"
  logos={[
    { name: "Northwind", href: "/customers/northwind" },
    { name: "Globex", href: "/customers/globex" },
    { name: "Initech", href: "/customers/initech" },
  ]}
/>

Die Namen oben sind Platzhalter, und das Standard-LOGO_CLOUD_SAMPLE besteht aus acht fiktiven Firmen. Ersetz sie durch Kunden, die zugestimmt haben, genannt zu werden. Logos mit einem href werden über linkComponent zu Links. Das Layout grid bricht auf Smartphones in zwei Spalten um; marquee scrollt eine Reihe in reinem CSS, hält unter dem Mauszeiger an und solange ein Logo-Link den Fokus hat, und wird bei reduzierter Bewegung zu einer stehenden, umbrechenden Reihe.

Was geht auf einem 390px breiten Smartphone kaputt?

Meist eins von vier Dingen: der erste Screen, die Ankündigung, das Bild oder die Zeile mit Belegen. Prüf sie vor dem Release, wenn möglich auf einem echten Smartphone:

• Der erste Screen. Headline, Beschreibung und beide Buttons sollten ohne Scrollen sichtbar sein. Sind sie es nicht, kürz die Beschreibung, nicht die Buttons. Verzichte auf einen Hero mit festem h-screen: Die Browserleisten auf Smartphones ändern die Höhe des Viewports, wie unser Guide zu 100vh auf Mobilgeräten erklärt.
• Die Ankündigung. Halt sie bei ein paar Wörtern; auf dem Smartphone wird längerer Text mit einer Ellipse abgeschnitten.
• Das Bild. Nichts darin darf ein horizontales Scrollen erzwingen. Screenshots brauchen w-full h-auto; breite Tabellen oder Code im Bild müssen sich einklappen oder abschneiden lassen.
• Die Zeile mit Belegen. Sie steht unter den Buttons, und auf einem schmalen Smartphone können Avatare und Bewertung auf zwei Zeilen umbrechen. Achte darauf, dass sie trotzdem als eine zusammenhängende Aussage gelesen wird.

Was kommt nach dem Hero?

Die Abschnitte, die den Rest des Pitches tragen. Der Guide zur Next.js SaaS Landing Page behandelt die Abschnitte darunter, der Guide zur shadcn Navbar die Leiste darüber, das AI SaaS Landing Page Template einen Hero, dessen Demo auf einen Prompt antwortet, und die Vorlage Landing Page setzt alles zusammen, mit dieser Hero Section schon an ihrem Platz. Weitere komplette Screens findest du in der Kategorie Praxis: Screens und Apps, angefangen bei ihrem Pillar-Artikel, dem Next.js Admin Dashboard Tutorial.

Hero Section, Text Rotate und Background Pattern gehören zu Pro (8 $ im Monat, 80 $ im Jahr oder einmalig 150 $); die Logo Cloud ist mit einem kostenlosen Konto verfügbar. Installier den Hero mit npx wingo-ui@latest add hero-section, formulier dein einziges Versprechen und schau ihn dir bei 390px an, bevor du ihn auf deinem Monitor ansiehst.

Häufige Fragen

Was gehört in eine Hero Section?

Eine Headline mit einem einzigen Versprechen, ein Satz, für wen das Produkt ist, eine primäre Aktion, eine sekundäre Aktion mit weniger Verbindlichkeit, eine Zeile mit Belegen und ein Bild des Produkts. Alles andere, etwa Feature-Listen und Preise, gehört weiter nach unten.

Hat shadcn/ui eine Hero-Section-Komponente?

Nein. Die offiziellen Blocks von shadcn/ui decken Stand November 2026 Sidebars sowie Login- und Signup-Screens ab, aber keine Heroes. Hero Sections kommen aus Galerien, die auf shadcn/ui aufbauen, oder aus Bibliotheken wie Wingo UI, das seine Hero Section mit npx wingo-ui@latest add hero-section installiert.

Wie hoch sollte eine Hero Section auf dem Smartphone sein?

Hoch genug für Headline, Beschreibung und beide Buttons auf dem ersten Screen; das Produktbild darf darunter beginnen. Verzichte auf Smartphones auf einen Hero mit fester Höhe von 100vh: Die Browserleisten ändern die Höhe des Viewports, und der Inhalt eines Heroes in voller Höhe wird abgeschnitten oder springt.

Sollte das Hero-Bild ein Screenshot sein oder in Code gezeichnet?

Ein echter Screenshot zeigt das tatsächliche Produkt und ist die ehrliche Wahl, sobald die UI stabil ist. Ein gezeichnetes Mockup kostet keinen Bild-Download, folgt Light und Dark Mode und bleibt in jeder Größe scharf. Das passt zu jungen Produkten und zu Seiten, deren UI sich jede Woche ändert.

Ist die Hero Section von Wingo UI kostenlos?

Nein. Hero Section, Text Rotate und Background Pattern sind Pro-Items, und Pro kostet 8 $ im Monat. Die Logo Cloud ist mit einem kostenlosen Konto verfügbar, genau wie Button, Avatar und Marketing Section, auf denen die Hero Section aufbaut.