# Hero — centred

> A centred landing page hero: eyebrow, headline, text and buttons, with optional media below.

Facade UI item `hero-centered` (block, section).
Docs page: https://facadeui.dev/components/hero-centered · Registry JSON: https://facadeui.dev/r/hero-centered.json

## Install

```bash
npx shadcn@latest add @facade/hero-centered
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/hero-centered.json`. The CLI also installs what it needs: @facade/container, @facade/cta-group, @facade/eyebrow, @facade/heading, @facade/section, @facade/types, @facade/utils.

Files: `components/sections/hero-centered.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/hero-centered-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { Badge } from "@/components/ui/badge"
import { HeroCentered } from "@/components/sections/hero-centered"

import { ACTIONS } from "./content"

export function Demo() {
  return (
    <HeroCentered
      banner={<Badge variant="outline">v0.1 is out</Badge>}
      eyebrow="Free and open source"
      title="The front of every great website"
      description="Marketing sections and a design system you install with the shadcn CLI. The source lands in your project — yours to read, change and own."
      actions={ACTIONS}
      note="MIT licensed. No account, no gating."
      headingLevel={1}
      spacing="md"
    />
  )
}
```

## Props

### HeroCenteredProps

Extends StackSlotProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` (required) | `string` |  |  |
| `description` | `string` |  |  |
| `eyebrow` | `ReactNode` |  |  |
| `actions` | `CtaItem[]` |  |  |
| `link` | `LinkComponent` |  |  |
| `note` | `ReactNode` |  | Small print under the buttons, such as "No card required". |
| `banner` | `ReactNode` |  | Shown above the eyebrow, such as a Badge, an announcement or a rating. |
| `media` | `ReactNode` |  | Shown below the buttons, such as a screenshot, a video or a logo strip. |
| `headingLevel` | `HeadingLevel` | `1` |  |
| `size` | `"md" \| "lg" \| "xl"` | `"lg"` |  |
| `as` | `"section" \| "div"` | `"div"` |  |
| `spacing` | `"sm" \| "md" \| "lg" \| "none"` | `"lg"` |  |
| `className` | `string` |  |  |
| `id` | `string` |  |  |