Hero Sections

5 variantsPro

Five landing heroes — a drifting aurora over a live workflow run, a split hero with a clickable product demo, a terminal that installs then renders a component, a cited answer engine and a search-first marketplace with floating listings.

herolandingmarketingheadlineaurorademoterminalsearchmarketplaceaicitations

Aurora workflow

aurora-workflow.tsx

Centered hero over blurred, drifting volt and ember blobs, with a glass workflow strip whose steps run one after another.

$npx shadcn@latest add @geturui-pro/hero-sections-aurora-workflow

Prop	Type	Default	Description
`eyebrow`	`string`	—	Glass pill above the headline.
`headline`	`string`	—	Main h1.
`subcopy`	`string`	—	Supporting paragraph.
`primaryAction`	`{ label: string; href?: string; onClick?: () => void }`	—	Volt button. Renders a link when href is set.
`secondaryAction`	`{ label: string; href?: string; onClick?: () => void } \| null`	—	Secondary button. null hides it.
`steps`	`AuroraWorkflowStep[]`	—	{ kind, title, meta, icon?: "trigger" \| "ai" \| "branch" \| "action" }.
`stepDuration`	`number`	`1300`	Milliseconds each step spends running.
`className`	`string`	—	Classes for the section.

Split demo

split-demo.tsx

Copy on the left and a working expense-approval inbox on the right: approve, flag or switch on an auto-approve rule until you hit inbox zero.

$npx shadcn@latest add @geturui-pro/hero-sections-split-demo

Prop	Type	Default	Description
`eyebrow`	`string`	—	Ember chip above the headline.
`headline`	`string`	—	Main h1.
`subcopy`	`string`	—	Supporting paragraph.
`primaryAction`	`{ label: string; href?: string; onClick?: () => void }`	—	Volt button.
`secondaryAction`	`{ label: string; href?: string; onClick?: () => void } \| null`	—	Ghost button. null hides it.
`proof`	`string \| null`	—	Rating line under the buttons.
`expenses`	`SplitDemoExpense[]`	—	{ id, person, merchant, category, amount } with amount in cents.
`autoApproveLimit`	`number`	`5000`	Cents at or under which the rule auto-approves.
`className`	`string`	—	Classes for the section.

Code demo

code-demo.tsx

A terminal types the install command and streams its output, then the installed plan card springs into a live preview you can click.

$npx shadcn@latest add @geturui-pro/hero-sections-code-demo

Prop	Type	Default	Description
`eyebrow`	`string`	—	Mono label above the headline.
`headline`	`string`	—	Main h1.
`subcopy`	`string`	—	Supporting paragraph.
`primaryAction`	`{ label: string; href?: string; onClick?: () => void }`	—	Volt button.
`secondaryAction`	`{ label: string; href?: string; onClick?: () => void } \| null`	—	Outline button. null hides it.
`command`	`string`	`"npx geturui add plan-card"`	Typed into the terminal and offered in the copy pill.
`output`	`string[]`	—	Lines printed after the command, one per beat; the last is highlighted.
`fileName`	`string`	`"plan-card.tsx"`	Shown above the preview.
`typingSpeed`	`number`	`45`	Milliseconds per typed character.
`className`	`string`	—	Classes for the section.

Centered cited

centered-cited.tsx

Answer-engine hero: a question types itself, sources load one by one, then the answer streams in with citation markers that light up their source.

$npx shadcn@latest add @geturui-pro/hero-sections-centered-cited

Prop	Type	Default	Description
`eyebrow`	`string`	—	Pill above the headline.
`headline`	`string`	—	Main h1.
`subcopy`	`string`	—	Supporting paragraph.
`primaryAction`	`{ label: string; href?: string; onClick?: () => void }`	—	Button beside the example chips.
`examples`	`CitedExample[]`	—	{ label, question, answer: { text, cites? }[], sources: { id, title, site, snippet }[] }. The first plays on mount.
`className`	`string`	—	Classes for the section.

Marketplace

marketplace.tsx

Search-first hero with a big search bar, category chips under a sliding highlight and listing cards that float around the headline and refilter live.

$npx shadcn@latest add @geturui-pro/hero-sections-marketplace

Prop	Type	Default	Description
`eyebrow`	`string`	—	Line above the headline.
`headline`	`string`	—	Main h1.
`subcopy`	`string`	—	Supporting paragraph.
`city`	`string`	`"Lisbon"`	Shown in the search bar.
`listings`	`MarketplaceListing[]`	—	{ id, title, area, category: "photo" \| "podcast" \| "kitchen" \| "rooftop" \| "workshop", price, rating, href? }.
`onSearch`	`(query: string, category: MarketplaceCategory \| "all") => void`	—	Called when the search form is submitted.
`className`	`string`	—	Classes for the section.

Install the whole set

Installs every hero sections variant at once. Each section above has its own command for a single variant.

Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.

$npx shadcn@latest add @geturui-pro/hero-sections

Also installs: Button, Copy Button

Accessibility

Headlines are real h1 elements; decorative aurora, product art and floating cards are aria-hidden.
Interactive demos use real buttons with labels (approve, flag, billing radios, citation markers) and announce results through polite live regions.
Typing, looping and drifting animations stop under reduced motion and show their finished state instead.

Bento Showcase Contact Sections CTA Banner CTA Sections