Hero

Basic Hero

Welcome to Our Platform

Build amazing experiences with our component library

Create beautiful, accessible user interfaces with our comprehensive set of components designed for modern web applications.

Hero with Image

Powerful Solutions

Transform your ideas into reality

Hero with Background

Stunning Visuals

Make an impact with beautiful backgrounds

Use background images and overlays to create compelling hero sections that capture attention.

Hero with Gradient

Modern Design

Beautiful gradients and animations

Stand out with gradient backgrounds and smooth animations that bring your content to life.

Sizes & Alignment

Small Hero

Compact and efficient

Right Aligned

Different text alignment options

<!-- Basic Hero -->
<Hero
  title="Welcome to Our Platform"
  subtitle="Build amazing experiences"
  description="Create beautiful, accessible user interfaces."
  actions={[
    { text: 'Get Started', intent: 'primary' },
    { text: 'Learn More', intent: 'secondary', variant: 'outlined' }
  ]}
/>

<!-- Hero with Background Image -->
<Hero
  title="Stunning Visuals"
  subtitle="Make an impact"
  backgroundImage="/hero-bg.jpg"
  overlay={true}
  actions={[
    { text: 'Explore', intent: 'primary' }
  ]}
/>

<!-- Hero with Gradient -->
<Hero
  title="Modern Design"
  subtitle="Beautiful gradients"
  gradient={true}
  size="large"
  textAlign="center"
/>

npx ui-gen add Hero

Properties

`title`

type: string

required: true

The main heading text for the hero section.

`subtitle`

type: string

default: undefined

Optional subtitle text displayed below the title.

`description`

type: string

default: undefined

Optional longer description text for additional context.

`image`

type: HeroImage | string

default: undefined

Image to display alongside the hero content. Can be a string URL or an object with src, alt, width, and height properties.

`backgroundImage`

type: string

default: undefined

URL for a background image. When used, the hero content will overlay the background.

`backgroundColor`

type: string

default: 'transparent'

Background color for the hero section. Accepts any valid CSS color value.

`textAlign`

type: string

options: 'left', 'center', 'right'

default: 'center'

Controls the text alignment of the hero content.

`size`

type: string

options: 'small', 'medium', 'large'

default: 'medium'

Controls the overall height and padding of the hero section.

`actions`

type: HeroAction[]

default: []

Array of action buttons to display. Each action can have text, href, intent, variant, and size properties.

`overlay`

type: boolean

default: false

Adds a dark overlay when using background images to improve text readability.

`gradient`

type: boolean

default: false

Applies a beautiful gradient background (blue to purple).

Action Properties

Each action in the actions array supports the following properties:

`text`

type: string

required: true

The button text to display.

`href`

type: string

default: undefined

URL for the button link.

`intent`

type: string

options: 'primary', 'secondary', 'success', 'warning', 'danger', 'info', 'ghost'

default: 'primary'

Visual intent/color scheme for the button.

`variant`

type: string

options: 'default', 'contained', 'outlined', 'text'

default: 'default'

Button variant style.

`size`

type: string

options: 'small', 'medium', 'large'

default: 'medium'

Button size.

Accessibility

The Hero component includes comprehensive accessibility features:

Semantic HTML using <section> element
Proper heading hierarchy with <h1> for titles
Screen reader friendly structure
Keyboard navigation support for action buttons
Responsive design that works on all devices
High contrast text options with overlay/gradient support
Excellent dark mode with proper contrast ratios and smooth transitions

Dark Mode

The Hero component features excellent dark mode support with:

Automatic dark mode detection via prefers-color-scheme
Class-based dark mode support (.dark class)
Enhanced typography with high-contrast gradients in dark mode
Improved image styling with subtle borders and enhanced shadows
Refined overlay and gradient backgrounds optimized for dark themes
Smooth transitions between light and dark modes
WCAG-compliant contrast ratios in both light and dark modes

Examples

Basic Hero with Actions

<Hero
  title="Welcome to Our Platform"
  subtitle="Build amazing experiences"
  description="Create beautiful, accessible user interfaces with our comprehensive component library."
  actions={[
    { text: 'Get Started', intent: 'primary' },
    { text: 'View Docs', intent: 'secondary', variant: 'outlined' }
  ]}
/>

Hero with Background Image

<Hero
  title="Stunning Visuals"
  subtitle="Make an impact"
  backgroundImage="/hero-background.jpg"
  overlay={true}
  textAlign="center"
  size="large"
  actions={[
    { text: 'Explore Features', intent: 'primary', size: 'large' }
  ]}
/>

Hero with Side Image

<Hero
  title="Powerful Solutions"
  subtitle="Transform your ideas"
  image={{
    src: "/hero-image.jpg",
    alt: "Product showcase",
    width: 600,
    height: 400
  }}
  textAlign="left"
  actions={[
    { text: 'Start Building', intent: 'primary' },
    { text: 'Learn More', intent: 'ghost', variant: 'text' }
  ]}
/>

Gradient Hero

<Hero
  title="Modern Design"
  subtitle="Beautiful gradients and animations"
  gradient={true}
  size="large"
  textAlign="center"
  actions={[
    { text: 'Try It Now', intent: 'primary', size: 'large' }
  ]}
/>