Hero
.mdMarketing hero with a pulsing announcement pill, a word-by-word headline with a volt-marked word, two CTAs, a copyable install command and a floating product shot of animated UI cards.
herolandingmarketingheadlinectainstallproduct shot
Installation
$npx shadcn@latest add @geturui/hero-section
Also installs: Animated Badge, Button, Copy Button, Odometer Number, Text Animation
Usage
usage.tsx
1import { HeroSection } from "@/components/blocks/hero-section";
2
3export default function Page() {
4 return (
5 <HeroSection
6 variant="split"
7 eyebrow="v2 is out: 40 new blocks"
8 eyebrowHref="/changelog"
9 headline="Ship interfaces your users will feel"
10 mark="feel"
11 primaryAction={{ label: "Get started", href: "/docs" }}
12 secondaryAction={{ label: "View on GitHub", href: "https://github.com/acme/ui" }}
13 installCommand="npx shadcn@latest add @acme/hero"
14 />
15 );
16}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "centered" | "split" | "centered" | Stack copy over the product shot, or place them side by side on wide containers. |
eyebrow | string | null | "New: 14 page-section blocks" | Announcement pill text. null hides the pill. |
eyebrowBadge | string | "New" | Label on the pulsing badge inside the pill. |
eyebrowHref | string | — | Turns the pill into a link. |
headline | string | — | Revealed word by word on mount. |
mark | string | — | One word of the headline to underline with a volt swash. |
subcopy | string | — | Supporting paragraph under the headline. |
primaryAction | { label: string; href?: string; onClick?: () => void } | — | Volt button with a nudging arrow. Renders a link when href is set. |
secondaryAction | { label: string; href?: string; onClick?: () => void } | — | Secondary button beside the primary. |
installCommand | string | null | — | Shell command shown with a copy button. null hides the row. |
showProductShot | boolean | true | Floating product shot built from animated divs. |
className | string | — | Classes for the outer section. |
Accessibility
- The headline keeps its full text in aria-label while the animated words are aria-hidden.
- The product shot is decorative and aria-hidden; its loops stop under reduced motion.
- CTAs render real links or buttons; the copy button announces Copied after use.