Hero section

Pro

The first section of a landing page: announcement, h1, lead, actions and a note, with the product beside or below it over a quiet backdrop. Parts rise in one after another.

npx prodular-ui add hero-section

Part of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing

Split hero

Text beside the media on wide screens, stacked on phones. The SaaS landing block shows the centered variant with a tilted product frame.

Close the month in days, not weeks

Relay matches every payment to its invoice and posts it to your ledger, every hour.

Works with NetSuite, QuickBooks and Xero.

Reconciled today1,284All matched, 0 to review

import { Button } from "@/components/ui/button"import { HeroSection } from "@/components/ui/hero-section"
export default function HeroSectionSplit() {  return (    <div className="w-full overflow-hidden rounded-xl border bg-background">      <HeroSection        variant="split"        backdrop="dots"        title="Close the month in days, not weeks"        lead="Relay matches every payment to its invoice and posts it to your ledger, every hour."        actions={          <>            <Button size="lg">Start free trial</Button>            <Button size="lg" variant="outline">See how it works</Button>          </>        }        note="Works with NetSuite, QuickBooks and Xero."        media={          <div className="flex aspect-[4/3] flex-col justify-end gap-2 rounded-xl border bg-card p-6 shadow-sm">            <span className="text-[13px] text-muted-foreground">Reconciled today</span>            <span className="text-4xl font-semibold tracking-tight tabular-nums">1,284</span>            <span className="text-sm text-success-subtle-foreground">All matched, 0 to review</span>          </div>        }      />    </div>  )}

Anatomy

<HeroSection  announcement={<Announcement badge="New" href="/blog">...</Announcement>}  title="..."  lead="..."  actions={<Button size="lg">Start free trial</Button>}  media={<ProductFrame tilt fade>...</ProductFrame>}/>

Guidance

Use it when

The top of a landing page, once.
centered with a wide ProductFrame; split when the media is a card or an illustration.

Avoid

More than two actions.
Long leads. Two sentences at most.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Title is the promise in one sentence; lead says how in one or two.
Put the primary action first and a quiet secondary one second.
note is for reassurance like a free trial line, not features.

API

HeroSection

Prop	Type	Default	Description
variant	"centered" \| "split"	"centered"	Layout.
announcement / title / lead / actions / note	ReactNode		The text parts.
media	ReactNode		The product.
backdrop	Backdrop variant or "none"	"grid-glow"	The pattern behind it.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add hero-section# or, with the registry in components.jsonnpx shadcn@latest add @prodular/hero-section