Hero
A marketing hero section with an optional announcement badge, heading, supporting copy, primary and secondary CTAs, and a tiled image gallery — all configurable via props.
Loading preview…
1<script lang="ts">
2 import Hero from "./hero.svelte";
3</script>
4
5<Hero
6 announcement="New: v2.0 is here"
7 title="Build your design system faster"
8 description="A shadcn-svelte based component registry, ready to install into any project."
9 primaryCta={{ label: "Get Started", href: "/docs/installation" }}
10 secondaryCta={{ label: "Browse components", href: "/components" }}
11/>
12Installation
1. Copy these files into your project
- ~/components/hero/hero.svelte
Usage
Drop Hero at the top of a marketing page. It’s self-contained, fills the available width, and ships with sensible defaults so it renders out of the box — override any prop to customize it.
1<script lang="ts">
2 import Hero from "$lib/components/hero/hero.svelte";
3</script>
4
5<Hero
6 announcement="New: v2.0 is here"
7 title="Build your design system faster"
8 description="A shadcn-svelte based component registry, ready to install into any project."
9 primaryCta={{ label: "Get Started", href: "/docs/installation" }}
10 secondaryCta={{ label: "Browse components", href: "/components" }}
11 images={[{ src: "/hero-1.jpg" }, { src: "/hero-2.jpg" }, { src: "/hero-3.jpg" }, { src: "/hero-4.jpg" }, { src: "/hero-5.jpg" }]}
12/>Props
| Prop | Type | Default |
|---|---|---|
class | string | — |
announcement | string | — (badge hidden when omitted) |
title | string | "We're changing the way people connect" |
description | string | lorem ipsum copy |
primaryCta | { label: string; href: string } | { label: "Get started", href: "#" } |
secondaryCta | { label: string; href: string } | { label: "Live demo", href: "#" } |
images | { src: string; alt?: string }[] | 5 stock photos |