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.