sections

HeroSection

Full hero section with heading, subheading, CTA, and optional visual. Supports centered and split layouts.

v1.0.0react >=18next >=14tailwind >=4motion >=12

herolandingsectionabove-the-foldheadingcta

Preview

Loading preview...

Props

Prop	Type	Default	Description
`heading*`	`ReactNode`	`—`	Primary heading content
`subheading`	`ReactNode`	`—`	Supporting text below the heading
`cta`	`ReactNode`	`—`	Call-to-action element (button, link, or group)
`visual`	`ReactNode`	`—`	Visual element (image, video, illustration, or animation component)
`align`	`string`	`center`	Layout alignment. 'center' stacks vertically; 'left' creates a split layout with visual on the right.
`className`	`string`	`—`	Additional Tailwind classes for the outer section
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`heading`	`ReactNode`	Yes	Primary heading content (h1, styled text, etc.)
`subheading`	`ReactNode`	No	Supporting text or paragraph below the heading
`cta`	`ReactNode`	No	Call-to-action button or link group
`visual`	`ReactNode`	No	Image, video, illustration, or animation component

Layout

Display: flex

Responsive: Yes

Full-width section. Center or split layout based on align prop. Centered uses flex-col; left uses 2-column grid on desktop.

Examples

Centered hero

<HeroSection
  heading={<h1 className="text-5xl font-bold">Build faster with AI</h1>}
  subheading={<p className="text-lg text-neutral-400">Ship beautiful interfaces in minutes</p>}
  cta={<button className="rounded-full bg-white px-8 py-3 text-black">Get Started</button>}
/>

Split layout with visual

<HeroSection
  align="left"
  heading={<h1 className="text-5xl font-bold">Design meets motion</h1>}
  subheading={<p className="text-lg text-neutral-400">Animated components for modern apps</p>}
  cta={<button className="rounded-full bg-white px-8 py-3 text-black">Explore</button>}
  visual={<img src="/hero.png" alt="Hero" className="rounded-2xl" />}
/>

With background component

<div className="relative">
  <Aurora className="absolute inset-0" />
  <HeroSection
    heading={<h1 className="text-6xl font-bold">Welcome</h1>}
    cta={<ShimmerButton>Start Building</ShimmerButton>}
  />
</div>

AI Usage Hint

Use HeroSection as the top section of a landing page. Pass heading, subheading, and CTA as ReactNode slots. Set align='left' for a split layout with visual on the right. Pair with background components (GradientMesh, Aurora, DotGrid) behind it.

Works Well With

GradientMeshAuroraDotGridFadeUpScaleIn