---
type: block
title: Hero
description: Hero sections for launches, product storytelling, editorial pages, and social proof.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro live props={{ name: 'hero-1' }}
---
import Hero1Block from "@/components/blocks/hero-1.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero1Block
  title="Build Astro pages from reusable content sections"
  description="Production-ready hero blocks, feature grids, and pricing layouts that drop into any Astro project."
  badge={{ label: "New in v0.9", href: "/docs/" }}
  buttons={[
    { label: "Browse docs", href: "/docs/" },
    { label: "See components", href: "/components/" },
  ]}
  image={{ src: placeholderImage, alt: "" }}
/>
```

```astro live props={{ name: 'hero-2' }}
---
import Hero2Block from "@/components/blocks/hero-2.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero2Block
  title="Social proof above a clear headline"
  description="A hero with social proof at the top (avatars, rating, and a trust line), followed by a clear message and full-width image."
  socialProof={{
    avatars: [
      { image: placeholderImage, initials: "AM" },
      { image: placeholderImage, initials: "KL" },
      { image: placeholderImage, initials: "SV" },
    ],
    rating: 4.8,
    ratingLabel: "Rated 4.8 out of 5",
    text: "Example: 4.8 from 120 reviews",
  }}
  buttons={[
    { label: "Get started", href: "/docs/" },
    { label: "View blocks", href: "/blocks/" },
  ]}
  image={{ src: placeholderImage, alt: "" }}
/>
```

```astro live props={{ name: 'hero-3' }}
---
import Hero3Block from "@/components/blocks/hero-3.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero3Block
  title="Ship landing pages in hours, not weeks"
  description="A bold hero with text centered over a full background image. Ideal for launches, events, and product announcements."
  buttons={[
    { label: "Start building", href: "/docs/" },
    { label: "See examples", href: "/blocks/" },
  ]}
  image={{ src: placeholderImage }}
/>
```

```astro live props={{ name: 'hero-4' }}
---
import Hero4Block from "@/components/blocks/hero-4.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero4Block
  title="Full-screen impact for product launches and events"
  description="A taller version of the background image hero that fills the viewport. Includes a feature checklist for quick scanning."
  features={[
    "Zero-JS components by default",
    "Astro-first primitives",
    "Dark mode included",
  ]}
  buttons={[
    { label: "Learn more", href: "/docs/" },
    { label: "Contact sales", href: "#" },
  ]}
  image={{ src: placeholderImage }}
/>
```

```astro live props={{ name: 'hero-5' }}
---
import Hero5Block from "@/components/blocks/hero-5.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero5Block
  title="Everything you need to build with Astro"
  description="A split hero with a feature checklist, action buttons, and social proof on the left, and a product image on the right."
  features={[
    "Zero-JS components by default",
    "shadcn-compatible installation",
    "Astro-first primitives",
    "Fully accessible and keyboard-navigable",
  ]}
  buttons={[
    { label: "Get started", href: "/docs/" },
    { label: "Components", href: "/components/" },
  ]}
  socialProof={{
    avatars: [
      { image: placeholderImage, initials: "AM" },
      { image: placeholderImage, initials: "KL" },
      { image: placeholderImage, initials: "SV" },
    ],
    rating: 4.8,
    ratingLabel: "Rated 4.8 out of 5",
    text: "Example: 4.8 from 120 reviews",
  }}
  image={{ src: placeholderImage, alt: "" }}
/>
```

```astro live props={{ name: 'hero-6' }}
---
import Hero6Block from "@/components/blocks/hero-6.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero6Block
  title="The component library built for Astro"
  description="Split layout with features, social proof, and a side-by-side image. Works for product pages and SaaS landing pages."
  features={[
    "Ship pages faster with blocks",
    "Consistent design system tokens",
    "Dark mode included",
  ]}
  buttons={[
    { label: "Browse blocks", href: "/blocks/" },
    { label: "Documentation", href: "/docs/" },
  ]}
  socialProof={{
    avatars: [
      { image: placeholderImage, initials: "FD" },
      { image: placeholderImage, initials: "AV" },
      { image: placeholderImage, initials: "UI" },
    ],
    rating: 4.8,
    ratingLabel: "Rated 4.8 out of 5",
    text: "Example: 4.8 from 120 reviews",
  }}
  image={{ src: placeholderImage, alt: "" }}
/>
```

```astro live props={{ name: 'hero-7' }}
---
import Hero7Block from "@/components/blocks/hero-7.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero7Block
  title="A wider image for visual-heavy products"
  description="2:3 split with a larger image area that bleeds to the right edge. Ideal for showcasing dashboards, apps, or creative work."
  features={[
    "Large image area for product screenshots",
    "Content stays readable at all sizes",
    "Image bleeds to the edge on desktop",
  ]}
  buttons={[
    { label: "View demo", href: "#" },
    { label: "Documentation", href: "/docs/" },
  ]}
  socialProof={{
    avatars: [
      { image: placeholderImage, initials: "AM" },
      { image: placeholderImage, initials: "KL" },
      { image: placeholderImage, initials: "SV" },
    ],
    rating: 4.8,
    ratingLabel: "Rated 4.8 out of 5",
    text: "Example: 4.8 from 120 reviews",
  }}
  image={{ src: placeholderImage, alt: "" }}
/>
```

```astro live props={{ name: 'hero-8' }}
---
import Hero8Block from "@/components/blocks/hero-8.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero8Block
  title="Let the image do the talking"
  description="Minimal text with maximum image. A 1:3 split where the product screenshot dominates and the message stays compact."
  buttons={[
    { label: "Get started", href: "/docs/" },
    { label: "Learn more", href: "#" },
  ]}
  image={{ src: placeholderImage, alt: "" }}
/>
```

```astro live props={{ name: 'hero-9' }}
---
import Hero9Block from "@/components/blocks/hero-9.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero9Block
  title="Content over a masked background image"
  description="A split hero where text and features sit on the left, with a background image fading in from the right using a gradient mask."
  features={[
    "Background image with gradient mask",
    "Content stays fully readable",
    "Works in both light and dark mode",
    "Ideal for atmospheric pages",
  ]}
  buttons={[
    { label: "Explore", href: "/docs/" },
    { label: "View source", href: "#" },
  ]}
  socialProof={{
    avatars: [
      { image: placeholderImage, initials: "AM" },
      { image: placeholderImage, initials: "KL" },
      { image: placeholderImage, initials: "SV" },
    ],
    rating: 4.8,
    ratingLabel: "Rated 4.8 out of 5",
    text: "Example: 4.8 from 120 reviews",
  }}
  image={{ src: placeholderImage }}
/>
```

```astro live props={{ name: 'hero-10' }}
---
import Hero10Block from "@/components/blocks/hero-10.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero10Block
  title="A full-bleed background image hero with overlaid content"
  description="Content and actions spread across the top, with a full background image visible underneath through gradient masks."
  buttons={[
    { label: "Start free", href: "/docs/" },
    { label: "Book a demo", href: "#" },
  ]}
  socialProof={{
    avatars: [
      { image: placeholderImage, initials: "FD" },
      { image: placeholderImage, initials: "AV" },
      { image: placeholderImage, initials: "UI" },
    ],
    rating: 4.8,
    ratingLabel: "Rated 4.8 out of 5",
    text: "Example: 4.8 from 120 reviews",
  }}
  image={{ src: placeholderImage }}
/>
```

```astro live props={{ name: 'hero-11' }}
---
import Hero11Block from "@/components/blocks/hero-11.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero11Block
  title="Centered content over a full background image"
  description="Content, buttons, and social proof centered vertically over a full-bleed background image with gradient masks."
  buttons={[
    { label: "Get started", href: "/docs/" },
    { label: "View pricing", href: "#" },
  ]}
  socialProof={{
    avatars: [
      { image: placeholderImage, initials: "AM" },
      { image: placeholderImage, initials: "KL" },
      { image: placeholderImage, initials: "SV" },
    ],
    rating: 4.8,
    ratingLabel: "Rated 4.8 out of 5",
    text: "Example: 4.8 from 120 reviews",
  }}
  image={{ src: placeholderImage }}
/>
```

```astro live props={{ name: 'hero-12' }}
---
import Hero12Block from "@/components/blocks/hero-12.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero12Block
  title="A minimal editorial hero with a border bar and full-width image"
  description="Title, description, and actions spread across a bordered bar, followed by a large image below."
  buttons={[{ label: "Read the story", href: "#" }]}
  image={{ src: placeholderImage, alt: "" }}
/>
```

```astro live props={{ name: 'hero-13' }}
---
import Hero13Block from "@/components/blocks/hero-13.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Hero13Block
  title="Small text, large image"
  description="A 1:3 split where the content stays compact on the left and the image takes the dominant position on the right."
  buttons={[{ label: "View products", href: "/blocks/products/" }]}
  image={{ src: placeholderImage, alt: "" }}
/>
```

## Installation

```bash
npx shadcn@latest add @fulldev/hero-1 @fulldev/hero-2 @fulldev/hero-3 @fulldev/hero-4 @fulldev/hero-5 @fulldev/hero-6 @fulldev/hero-7 @fulldev/hero-8 @fulldev/hero-9 @fulldev/hero-10 @fulldev/hero-11 @fulldev/hero-12 @fulldev/hero-13
```