Alpine Registry Template
blockexample-herosource: ok · refreshed
Example Hero Section
An example hero section with a heading, subheading, and two call to action buttons.
npx shadcn add "https://alpine-registry.vercel.app/r/example-hero.json"free
Where it goes
hero
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
@alpine/hero
Files1 · source cached 10/2/2026, 11:43:39 PM
registry/alpine/examples/example-hero.tsx
import { Hero } from "@/registry/alpine/marketing/hero"
import { Button } from "@/registry/alpine/ui/button"
export function ExampleHero() {
return (
<Hero
heading="Introducing Co‑Host Network"
subheading="Now you can hire a co-host to help. Plus, get more ways to make hosting and planning trips even easier."
imageUrl="https://images.unsplash.com/photo-1697807646004-31ae73a1a625"
>
<div className="flex gap-2 mt-2">
<Button size="lg">Learn more</Button>
<Button size="lg" variant="outline">
Get started
</Button>
</div>
</Hero>
)
}