Hero Section
Full-width hero with badge, headline, description, CTA buttons, install command, and optional media.
Preview
Import
import { HeroSection } from "@sigil-ui/components";Usage
<HeroSection
badge={<Badge>New in v2</Badge>}
title="Build faster with Sigil"
description="A token-driven design system for React."
actions={[
{ label: "Get started", href: "/docs" },
{ label: "GitHub", href: "https://github.com", variant: "secondary" },
]}
installCommand="npx create-sigil-app"
/>Left-aligned with media
<HeroSection
title="Ship with confidence"
description="Every component reads from your tokens."
align="left"
media={<img src="/hero.png" alt="Hero" />}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
badge | ReactNode | — | Element rendered above the title |
title | ReactNode | required | Main headline |
description | ReactNode | — | Supporting text below the headline |
actions | HeroAction[] | — | CTA buttons ({ label, href?, onClick?, variant? }) |
installCommand | string | — | Terminal command shown in a code block |
media | ReactNode | — | Image, video, or component below the actions |
align | "left" | "center" | "center" | Layout alignment |
className | string | — | Additional CSS classes |
Plus all standard <section> HTML attributes.