# Hero Section Beispiele für shadcn: sechs Layouts bei 390px > Hero Section Beispiele für shadcn, die konvertieren: ein Versprechen, zwei Aktionen, Belege neben den Buttons und ein Produktbild aus Code, geprüft bei 390px. - Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI - Veröffentlicht: 6. Nov. 2026 - Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build) - Lesezeit: 8 Min. - Kanonische URL: https://wingo-ui.com/de/blog/shadcn-hero-section - Englische Fassung: https://wingo-ui.com/blog/shadcn-hero-section ## Kurz gesagt Eine shadcn Hero Section, die konvertiert, gibt in der h1 ein einziges Versprechen, bietet zwei Aktionen an (die Registrierung und einen zweiten Schritt mit weniger Verbindlichkeit), setzt echte Belege neben die Buttons und zeigt das Produkt. Die Hero Section von Wingo UI deckt alle vier Punkte in sechs Layouts ab und zeichnet ihr Standard-Produktbild mit Theme-Tokens, es folgt also dem Dark Mode und kostet keinen Bild-Request. Auf einem 390px breiten Smartphone stapeln sich beide Aktionen in voller Breite und 48px Höhe, und kein Layout scrollt seitwärts. 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](https://www.shadcnblocks.com/blocks/hero) 292 Hero-Blöcke, die [shadcn-Hero-Sammlung von 21st.dev](https://21st.dev/community/components/explore/shadcn-hero-section) nennt 59, und [Tailark](https://pro.tailark.com/blog/hero-section) 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](https://wingo-ui.com/components/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: ```bash 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: ```tsx // app/(marketing)/page.tsx import Link from "next/link" import { HeroSection } from "@/components/blocks/hero-section" export default function HomePage() { return ( ) } ``` `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. | Layout | Passt für | Bei 390px | |---|---|---| | `centered` | einfache Produkte mit einer klaren Aktion | Text zentriert, Buttons gestapelt in voller Breite, das Produktbild darunter | | `split` | einen Ablauf, den das Bild erklärt | erst der Text, darunter das Bild (ab 1024px nebeneinander) | | `stacked` | lange Titel neben einem kurzen Pitch | Titel, dann Beschreibung und Buttons, dann das Bild | | `editorial` | Content-Seiten, Agenturen, keine Produkt-UI | große, linksbündige Schrift, die wichtigsten Fakten in einem zweispaltigen Raster, kein Mockup | | `media` | wenn die Produkt-UI der Beleg ist | der gezeichnete Workspace oben, die Textkarte darunter, über seinen unteren Rand gelegt | | `terminal` | CLIs, APIs, Developer-Tools | Text, dann ein gezeichnetes Terminal mit einer Installation und einem API-Aufruf | 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. > Live-Demo (Hero Section): Das Media-Layout mit einer primären Aktion im Brand-Ton. Auf dem Smartphone oder in einem schmalen Fenster bleibt der gezeichnete Workspace oben, die Textkarte rutscht darunter, und beide Buttons stapeln sich in voller Breite. Probier sie unter [Hero Section](https://wingo-ui.com/components/hero-section) aus und installier sie mit `npx wingo-ui@latest add hero-section`. ## 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](https://web.dev/articles/lcp) 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: ```tsx import Image from "next/image" import { BrowserFrame, HeroSection } from "@/components/blocks/hero-section" Die Rechnungsliste von Ledgerly mit drei bezahlten und einer überfälligen Rechnung } /> ``` Lass die alte Prop `priority` weg. Next.js 16 markiert sie als veraltet und ersetzt sie durch `preload`, und die [Image-Doku](https://nextjs.org/docs/app/api-reference/components/image) 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](https://wingo-ui.com/components/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: ```bash npx wingo-ui@latest add text-rotate ``` ```tsx import { TextRotate } from "@/components/ui/text-rotate" Rechnungen, die{" "} {" "} 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. > Live-Demo (Text Rotate): Jedes Wort klappt Buchstabe für Buchstabe in einer Pill im Brand-Ton herein. Fahr mit der Maus über das Wort, um es anzuhalten, denn pauseOnHover ist hier an. Probier sie unter [Text Rotate](https://wingo-ui.com/components/text-rotate) aus und installier sie mit `npx wingo-ui@latest add text-rotate`. ## 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](https://wingo-ui.com/components/background-pattern) in einem positionierten Wrapper und schalte den eigenen Hintergrund des Heroes ab, damit sich die beiden nicht überlagern: ```tsx import BackgroundPattern from "@/components/ui/background-pattern"
``` 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](https://wingo-ui.com/components/logo-cloud) ist kostenlos: ```bash npx wingo-ui@latest add logo-cloud ``` ```tsx import Link from "next/link" import { LogoCloud } from "@/components/blocks/logo-cloud" ``` 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. > Live-Demo (Logo Cloud): Fahr mit der Maus über die Reihe, um sie anzuhalten, oder spring mit Tab auf einen Logo-Link: Das Marquee stoppt, solange er den Fokus hat. Probier sie unter [Logo Cloud](https://wingo-ui.com/components/logo-cloud) aus und installier sie mit `npx wingo-ui@latest add logo-cloud`. ## 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](https://wingo-ui.com/de/blog/100vh-mobile-dvh-tailwind) 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](https://wingo-ui.com/de/blog/nextjs-saas-landing-page) behandelt die Abschnitte darunter, der [Guide zur shadcn Navbar](https://wingo-ui.com/de/blog/shadcn-navbar) die Leiste darüber, das [AI SaaS Landing Page Template](https://wingo-ui.com/de/blog/ai-saas-landing-page-template) einen Hero, dessen Demo auf einen Prompt antwortet, und die [Vorlage Landing Page](https://wingo-ui.com/templates/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](https://wingo-ui.com/de/blog/category/build), angefangen bei ihrem Pillar-Artikel, dem [Next.js Admin Dashboard Tutorial](https://wingo-ui.com/de/blog/nextjs-admin-dashboard-tutorial). Hero Section, Text Rotate und Background Pattern gehören zu [Pro](https://wingo-ui.com/de/pricing) (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. ## Komponenten in diesem Artikel - [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. Installation: `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. Installation: `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. Installation: `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. Installation: `npx wingo-ui@latest add logo-cloud` ## 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. --- Quelle: https://wingo-ui.com/de/blog/shadcn-hero-section