Hero sections for React and Tailwind

The first screen of a page in sixteen layouts, from a centered statement to video, app, tabs, form and terminal.

17 variants

Switch category

Which hero fits your page

The hero is the first screen a visitor sees, and it has one job. It says what the page offers and points to the next step. Every hero here takes its headline, text, buttons and media through props, so the same component works for a SaaS launch, a dental practice or a portfolio.

Start with Centered or Split when the message carries the page. Split puts a screenshot or photo next to the copy and suits products with something to show. With email form fits a waitlist or newsletter launch, With stats and With logos add proof right away, and With terminal speaks to developers. Image background and With video work for places and events, where the picture sells.

Keep the headline under ten words and the lead under two lines on a phone. Pick one primary button and at most one secondary. Every variant has its own phone layout, so check the preview at phone width before you decide, the order of image and text changes there.

Centered

One axis, a soft light from the top and the product rising below.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="centered" title="…" description="…" primaryAction={{ label, href }} media={<BrowserFrame>…</BrowserFrame>} />

Source

Split

Text left, media right. On phones the text comes first.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="split" title="…" description="…" primaryAction={{ label, href }} media={…} />

Source

Left with a big line

An oversized headline, then text and buttons on a hairline, the product below.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="left" title="…" description="…" primaryAction={…} media={…} />

Source

With email form

Sign-up right in the first screen, with validation, a thank you note and social proof.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-form" title="…" form={{ buttonLabel: "Get early access" }} proof={{ avatars, text, rating }} />

Source

With video

A poster with a play button opens the film in a dialog. Escape or a click outside closes it.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-video" title="…" video={{ poster: <img …/>, src: "/tour.mp4", caption: "Watch the tour", duration: "1:30" }} />

Source

App with phone

A phone with small cards floating around it, for mobile products.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="app" title="…" media={<PhoneFrame>…</PhoneFrame>} cards={[{ icon, title, value }]} />

Source

With logos

A centered statement over a hairline band of customer logos.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-logos" title="…" logosLabel="Trusted by…" logos={[<Logo />, …]} />

Source

With stats

Headline and text side by side, then four numbers in a hairline grid.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-stats" title="…" stats={[{ value: "98%", label: "…" }]} />

Source

With testimonial

A tall image with a customer quote laid over its edge.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-testimonial" title="…" media={<img …/>} testimonial={{ quote, name, role, avatar, rating }} />

Source

Image background

A motif fills the whole section, the text sits bottom left on a soft fade.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="image-background" background={<img className="size-full object-cover" …/>} title="…" />

Source

Product tabs

Tabs under the headline swap the screenshot. Arrow keys move between them.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="product-tabs" title="…" tabs={[{ id, label, icon, media }]} />

Source

Rotating word

The last word of the headline takes turns. Screen readers hear every option once.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="rotating-word" title="Websites for" rotatingWords={["law firms", "cafés", "studios"]} />

Source

Gradient mesh

A slow field of light in the accent color inside a framed panel.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="gradient-mesh" title="…" description="…" primaryAction={…} />

Source

Minimal

Type only, a quiet link and a row of facts on a hairline. For studios, firms and portfolios.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="minimal" eyebrow={<Badge dot>…</Badge>} title="…" meta={[{ label, value }]} />

Source

Editorial

A masthead, an oversized sans line and a wide image with a calm grid below.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="editorial" meta={[{ label, value }]} title="…" media={<img …/>} />

Source

With terminal

A command to copy and a terminal that types its output once it is in view.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="with-code" command="npx northwind init" terminal={{ title, lines: [{ kind: "command", text }] }} />

Source

Carousel

Slides with their own photo, headline and actions. The bar of the active slide fills as its timer, the photo settles slowly, and the slideshow stops for a pointer on the controls, for focus and on pause. Swipe on phones, arrow keys on the slide picker.

Open in Studio

Installv1.0.2

aiw add @ai-website/hero

Brings along utils, kit, button, icon, motion, number-ticker, rotating-words

Usage

<Hero variant="carousel" interval={7000} slides={[{ label, title, description, primaryAction, background: <img className="size-full object-cover" … /> }]} />

Source

Details

What Hero brings along, read from the registry and the source.

Area: Marketing
Variants: 17
Version: 1.0.2 · since 1.0.0
File: components/ui/hero.tsx
Brings along: utilskitbutton iconmotionnumber-ticker rotating-words
npm packages: None
Languages: English and German, 16 texts of its own
Studio: All 17 variants editable
In collections: SaaS landing page Local business
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The HeroProps interface from components/ui/hero.tsx, with the comments from the code.

variantoptional
HeroVariant
centeredsplitleftwith-formwith-videoappwith-logoswith-statswith-testimonialimage-backgroundproduct-tabsrotating-wordgradient-meshminimaleditorialwith-codecarousel
announcementoptional
{ tag?: string; label: string; href: string }
Small announcement above the title, links somewhere
eyebrowoptional
React.ReactNode
Short line above the title (minimal, editorial and others without announcement)
titlerequired
React.ReactNode
The headline. Pass a node to highlight a part, e.g. <span className="kit-accent-text">…</span>
descriptionoptional
React.ReactNode
primaryActionoptional
HeroAction
secondaryActionoptional
HeroAction
notesoptional
string[]
Short reassurances under the buttons, each with a check mark
mediaoptional
React.ReactNode
Image, screenshot, frame or any component
logosoptional
React.ReactNode[]
with-logos: customer logos
logosLabeloptional
string
statsoptional
HeroStat[]
with-stats
testimonialoptional
HeroTestimonial
with-testimonial
tabsoptional
HeroTab[]
product-tabs: each tab swaps the media
formoptional
HeroForm
with-form: email sign-up
proofoptional
HeroProof
with-form: avatars and a line of social proof
videooptional
HeroVideo
with-video: poster and dialog player
cardsoptional
HeroFloatingCard[]
app: small cards floating around the phone
rotatingWordsoptional
string[]
rotating-word: words that take turns at the end of the title
backgroundoptional
React.ReactNode
image-background: an image or drawn motif that fills the section
terminaloptional
{ title?: string; lines: HeroTerminalLine[] }
with-code: the terminal on the right
commandoptional
string
with-code: a command with a copy button
metaoptional
HeroMeta[]
minimal and editorial: small facts in a row
slidesoptional
HeroSlide[]
carousel: the slides. Without it the hero props make a single slide with `background`.
intervaloptional
number
carousel: milliseconds per slide, 0 turns autoplay off. Default 7000.

Built-in texts

Hero writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 16 texts

Key	English	German
email	English Email address	German E-Mail-Adresse
emailPlaceholder	English you@company.com	German du@firma.de
invalid	English Please enter a valid email address.	German Bitte gib eine gültige E-Mail-Adresse ein.
thanks	English Thanks. Check your inbox to confirm.	German Danke. Bitte bestätige die Mail in deinem Postfach.
play	English Play video	German Video abspielen
close	English Close	German Schließen
copy	English Copy command	German Befehl kopieren
copied	English Copied	German Kopiert
views	English Product views	German Produktansichten
rating	English out of 5 stars	German von 5 Sternen
slides	English Slides	German Folien
slide	English Slide {n} of {total}	German Folie {n} von {total}
previous	English Previous slide	German Vorherige Folie
next	English Next slide	German Nächste Folie
pause	English Pause slideshow	German Diashow anhalten
playSlides	English Play slideshow	German Diashow abspielen

Read from the source of the component.

Hero handles the keys Arrow left, Arrow right, Home, End and Space itself.
Built on the native dialog element. The browser keeps focus inside and closes it with Escape.
Sets aria-controls, aria-describedby, aria-haspopup, aria-invalid, aria-label, aria-labelledby, aria-live, aria-roledescription and aria-selected, so screen readers announce purpose and state.
Uses the roles img, status, tab, tablist and tabpanel.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 18 places in the code switch motion off then.

Frequent questions

How do I install Hero?

With aiw add @ai-website/hero. The command puts components/ui/hero.tsx into your project, the code is yours from then on. It brings along button, icon, motion, number-ticker and rotating-words. It needs no further npm packages.

Which variants does Hero have?

17 variants, Centered, Split, Left with a big line, With email form, With video, App with phone, With logos, With stats, With testimonial, Image background, Product tabs, Rotating word, Gradient mesh, Minimal, Editorial, With terminal and Carousel. You pick one with the variant prop, for example variant="split".

Can I translate the texts of Hero?

Yes. Hero carries 16 texts of its own in English and German, such as “Email address”, “you@company.com” and “Please enter a valid email address.”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Hero?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Hero with aiw_components and install it with aiw_add @ai-website/hero. Name the variant in your prompt, for example variant="centered", and the assistant writes your content straight into the props.

Can I adjust Hero without code?

Yes, in the Studio. All 17 variants are editable there, texts, lists and switches. The Studio writes the matching Hero code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Hero on a page.

Which hero fits your page

Hero

Centered

Split

Left with a big line

With email form

With video

App with phone

With logos

With stats

With testimonial

Image background

Product tabs

Rotating word

Gradient mesh

Minimal

Editorial

With terminal

Carousel

Details

Props

Built-in texts

Accessibility

Motion

Part of these collections

Part of these collections

Frequent questions

Similar components, Often combined with

Similar components

Often combined with