The Hero component displays a prominent hero section at the top of your documentation site with customizable title, description, and action buttons.

Key Features

Design Features

Gradient Background, Animated Card Visual, Smooth Animations, Modern Glass Effects

Responsive Design

Responsive layout that works perfectly on all screen sizes

Interactions

Smooth hover effects and animations applied to all elements

Dark Mode

Perfect support for light/dark themes

Basic Usage

The Hero component is configured through the frontmatter hero section in your MDX files:

Basic Usage With Actions Full Example

---
title: My Documentation
hero:
  tagline: A modern documentation site theme
---

# Welcome

---
title: My Documentation
hero:
  tagline: A modern documentation site theme
  actions:
    - text: Get Started
      link: /guides/getting-started/
      variant: primary
    - text: View on GitHub
      link: https://github.com
      variant: secondary
---

# Welcome

---
title: Starlight Page
description: Starlight theme inspired by Shadcn docs
hero:
  tagline: An intuitive, modern Starlight theme with smooth, float-in animations.
  actions:
    - text: Get Started
      link: /guides/getting-started/
      variant: primary
    - text: View Components
      link: /components/header/
      variant: secondary
    - text: View on GitHub
      link: https://github.com/pelagornis/starlight-theme-page
      variant: secondary
---

# Welcome to Starlight Page

Configuration Options

Option	Type	Default	Description
title	string	-	Hero title (uses page title if not set)
tagline	string	-	Hero tagline/subtitle
actions	Action[]	[]	Array of action buttons

Action Object

Property	Type	Default	Description
text	string	-	Button text (required)
link	string	-	Button link URL (required)
variant	'primary' | 'secondary'	'secondary'	Button style variant

Features

Modern Design

• Gradient Background: Beautiful gradient effects with radial overlays
• Animated Card: Interactive card visualization with hover effects
• Glass Effects: Backdrop blur and transparency effects
• Smooth Animations: Natural transitions for all interactions

Visual Elements

• Hero Title: Large, gradient text with underline accent
• Tagline: Descriptive subtitle text
• Action Buttons: Primary and secondary button styles with hover animations
• Card Visual: Decorative animated card with code-like lines

Dark Mode Support

• Automatic color adjustment
• Consistent user experience across themes
• Perfect theme compatibility

Responsive Design

The hero section adapts perfectly to different screen sizes:

Screen Size	Behavior
Desktop	Two-column layout with card
Tablet	Stacked layout
Mobile	Single column, card on top

Animation Effects

• Card Hover: Rotate and scale effects on hover
• Button Hover: Smooth lift and shadow effects
• Background: Radial gradient animations
• Shine Effect: Subtle shine animation on card header

Styling

The Hero component can be customized through CSS variables:

:root {
  --page-hero-padding: 6rem 0 4rem;
  --page-hero-radius: var(--page-radius-lg);
  --page-hero-title-size: 4rem;
  --page-hero-tagline-size: 1.25rem;
}

[data-theme="dark"] {
  /* Dark theme specific overrides */
}

Best Practices

1. Keep taglines concise: Aim for one to two sentences for the tagline
2. Limit actions: Use 2-3 action buttons maximum
3. Primary action first: Place the most important action as primary
4. External links: Use variant: secondary for external links like GitHub

Examples

Minimal Hero

---
title: My Docs
hero:
  tagline: Welcome to my documentation
---

Hero with Single Action

---
title: My Docs
hero:
  tagline: Get started in minutes
  actions:
    - text: Start Building
      link: /guides/getting-started/
      variant: primary
---

Hero with Tagline

---
title: My Docs
hero:
  tagline: An intuitive, modern Starlight theme with smooth, float-in animations.
  actions:
    - text: Get Started
      link: /guides/getting-started/
      variant: primary
---

Hero with Multiple Actions

---
title: My Docs
hero:
  tagline: An intuitive, modern Starlight theme with smooth, float-in animations.
  actions:
    - text: Quick Start
      link: /guides/quick-start/
      variant: primary
    - text: View Examples
      link: /examples/
      variant: secondary
    - text: GitHub
      link: https://github.com
      variant: secondary
---

Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

Provides optimal performance on modern browsers.