Skip to main content
Version: 1.0.3

Hero

The Hero component is a flexible, composition-based hero section for creating stunning landing page headers. It supports multiple variants, alignments, animations, and includes specialized sub-components for badges, features, stats, and glass morphism effects.

Build Amazing Experiences

Create beautiful, responsive user interfaces with our powerful component library. Start building today and bring your ideas to life.

Split Hero​

Build the Future of Your Business

Transform your ideas into reality with our cutting-edge platform. Join thousands of teams already building amazing products.

Modern workspace interior

Video Background Hero​

Experience the Future in Motion

Watch your ideas come to life with stunning video backgrounds. Create immersive experiences that captivate and inspire your audience.

Join Thousands of Happy Users

Be part of a growing community that's transforming the way we work and create.

Welcome to Our Platform

Discover amazing features and build something extraordinary with our powerful tools.

Innovation at Your Fingertips

Experience cutting-edge technology designed to help you achieve your goals faster.

Join Thousands of Happy Users

Be part of a growing community that's transforming the way we work and create.

Welcome to Our Platform

Discover amazing features and build something extraordinary with our powerful tools.

Installation​

ignix add component hero

Usage​

Import the component:

import { Hero, HeroContent, HeroHeading, HeroSubheading, HeroActions } from '@ignix-ui/hero';

Basic Usage​

function BasicHero() {
  return (
    <Hero variant="dark" align="center">
      <HeroContent>
        <HeroHeading>Welcome to Our Platform</HeroHeading>
        <HeroSubheading>
          Start building amazing experiences today.
        </HeroSubheading>
        <HeroActions>
          <Button>Get Started</Button>
        </HeroActions>
      </HeroContent>
    </Hero>
  );
}

Split Hero with Badge​

import { Hero, HeroContent, HeroHeading, HeroSubheading, HeroActions, HeroMedia } from '@ignix-ui/hero';
import { ButtonWithIcon } from '@ignix-ui/button-with-icon';
import { Rocket, ArrowUpRight } from 'lucide-react';

function HeroWithBadge() {
  return (
    <Hero split align="center">
        <HeroMedia
          src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1600&h=900&fit=crop&q=90"
          alt="Hero background"
          position="background"
          overlayOpacity={60}
        />
        <HeroContent>
          <HeroHeading>Build Amazing Experiences</HeroHeading>
          <HeroSubheading>
            Create beautiful, responsive user interfaces with our powerful
            component library. Start building today and bring your ideas to
            life.
          </HeroSubheading>
          <HeroActions>
            <ButtonWithIcon
              variant="outline"
              size="lg"
              iconPosition="right"
              icon={<Rocket />}
              className="px-8 py-6 rounded-lg shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300 bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-700 hover:to-fuchsia-700"
            >
              Start Building
            </ButtonWithIcon>
            <ButtonWithIcon
              variant="outline"
              size="lg"
              iconPosition="right"
              icon={<ArrowUpRight />}
              className="px-8 py-6 rounded-lg border-2 border-fuchsia-300 text-fuchsia-200 hover:bg-fuchsia-500/30 hover:border-fuchsia-200 transition-all duration-300 hover:scale-105"
            >
              Watch Demo
            </ButtonWithIcon>
          </HeroActions>
          <HeroMedia
            position="right"
            src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=900&h=800&fit=crop&q=90"
            alt="Modern workspace interior"
          />
        </HeroContent>
      </Hero>
  );
}

Video Background Hero​

import { Hero, HeroContent, HeroHeading, HeroSubheading, HeroActions, HeroMedia } from '@ignix-ui/hero';
import { Button } from '@ignix-ui/button';

function VideoHero() {
  return (
    <Hero align="center" animationType="fadeInUp">
      <HeroMedia
        src="https://assets.mixkit.co/videos/513/513-720.mp4"
        overlayOpacity={50}
        showPlayPause
        fallbackImage="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1600&h=900&fit=crop&q=90"
      />
      <HeroContent>
        <HeroHeading>Experience the Future in Motion</HeroHeading>
        <HeroSubheading>
          Watch your ideas come to life with stunning video backgrounds. 
          Create immersive experiences that captivate and inspire your audience.
        </HeroSubheading>
        <HeroActions>
          <Button variant="default" size="lg">Get Started</Button>
          <Button variant="default" size="lg">Learn More</Button>
        </HeroActions>
      </HeroContent>
    </Hero>
  );
}
import { HeroCarousel, HeroContent, HeroHeading, HeroSubheading, HeroActions, HeroBadge } from '@ignix-ui/hero';
import { Button } from '@ignix-ui/button';
import { Zap } from 'lucide-react';

function CarouselHero() {
  const slides = [
    {
      id: 'slide-1',
      src: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1920&h=1080&fit=crop',
      overlayOpacity: 50,
      content: (
        <HeroContent>
          <HeroHeading>Welcome to Our Platform</HeroHeading>
          <HeroSubheading>
            Discover amazing features and build something extraordinary with our powerful tools.
          </HeroSubheading>
          <HeroActions>
            <Button variant="default" size="lg">Get Started</Button>
            <Button variant="default" size="lg">Learn More</Button>
          </HeroActions>
        </HeroContent>
      ),
    },
    {
      id: 'slide-2',
      src: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1920&h=1080&fit=crop',
      overlayOpacity: 60,
      content: (
        <HeroContent>
          <HeroBadge icon={Zap} variant="solid">New Release</HeroBadge>
          <HeroHeading>Innovation at Your Fingertips</HeroHeading>
          <HeroSubheading>
            Experience cutting-edge technology designed to help you achieve your goals faster.
          </HeroSubheading>
          <HeroActions>
            <Button variant="default" size="lg">Explore Features</Button>
          </HeroActions>
        </HeroContent>
      ),
    },
    {
      id: 'slide-3',
      src: 'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1920&h=1080&fit=crop',
      overlayOpacity: 55,
      content: (
        <HeroContent>
          <HeroHeading>Join Thousands of Happy Users</HeroHeading>
          <HeroSubheading>
            Be part of a growing community that's transforming the way we work and create.
          </HeroSubheading>
          <HeroActions>
            <Button variant="default" size="lg">Join Now</Button>
          </HeroActions>
        </HeroContent>
      ),
    },
  ];

  return (
    <HeroCarousel
      slides={slides}
      autoRotate
      rotationInterval={2000}
      showNavigation
      showDots
    />
  );
}

Glass Morphism Hero​

import { Hero, HeroContent, HeroHeading, HeroSubheading, HeroActions, HeroMedia, HeroGlassCard, HeroBadge } from '@ignix-ui/hero';
import { Button } from '@ignix-ui/button';
import { Zap } from 'lucide-react';

function GlassMorphismHero() {
  return (
    <Hero variant="dark" align="center" animationType="fadeInUp">
      <HeroMedia
        src="https://images.unsplash.com/photo-1501785888041-af3ef285b470"
        alt="Abstract background"
        position="background"
        overlayOpacity={60}
      />
      <HeroContent className="gap-10 max-w-5xl">
        <HeroGlassCard className="p-16">
          <HeroBadge icon={Zap} variant="solid">
            Next Gen Platform
          </HeroBadge>
          <HeroHeading className="text-white mb-6">
            Elevate Your Digital Presence
          </HeroHeading>
          <HeroSubheading className="text-gray-200 text-xl max-w-3xl mx-auto mb-10">
            Experience the perfect fusion of design and technology.
          </HeroSubheading>
          <HeroActions className="gap-6">
            <Button variant="default" size="lg">Get Started</Button>
            <Button variant="default" size="lg">Learn More</Button>
          </HeroActions>
        </HeroGlassCard>
      </HeroContent>
    </Hero>
  );
}

Props​

Hero​

PropTypeDefaultDescription
variant'default' | 'dark''dark'Background gradient variant
backgroundClassNamestring-Custom background class (overrides variant)
align'left' | 'center' | 'right''center'Content alignment
containerSize'small' | 'normal' | 'large' | 'full' | 'readable''full'Container max width
animationType'none' | 'fadeIn' | 'fadeInUp' | 'fadeInDown' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'zoomIn' | 'flipIn' | 'bounceIn' | 'floatIn' | 'rotateIn''slideUp'Animation type for content elements
splitboolean-Enable side-by-side layout when HeroMedia with left/right position is present
classNamestring-Custom className
childrenReact.ReactNoderequiredHero content components

HeroContent​

PropTypeDefaultDescription
childrenReact.ReactNoderequiredContent elements (heading, subheading, actions, etc.)
classNamestring-Custom className

HeroHeading​

PropTypeDefaultDescription
childrenReact.ReactNoderequiredHeading text content
classNamestring-Custom className
as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'-HTML heading element (defaults to h1 via Typography variant)

HeroSubheading​

PropTypeDefaultDescription
childrenReact.ReactNoderequiredSubheading text content
classNamestring-Custom className

HeroActions​

PropTypeDefaultDescription
childrenReact.ReactNoderequiredAction buttons or links
classNamestring-Custom className

HeroMedia​

PropTypeDefaultDescription
srcstringrequiredMedia source URL (supports images, videos: .mp4, .webm, .ogg, .mov, or .gif)
altstring'background Image'Alt text for images (used when src is an image)
position'left' | 'right' | 'center' | 'background''background'Media position
overlayOpacitynumber40 for images, 50 for videosOverlay opacity (0-100). For videos, minimum enforced at 40 for text readability. Values are rounded to nearest 10
showPlayPausebooleanfalseShow play/pause control button (only for video/GIF backgrounds)
fallbackImagestring-Fallback image URL shown when video fails to load or is not supported
classNamestring-Custom className

Note: HeroMedia automatically detects the file type and renders either an image or video element. It supports:

  • Images: All standard image formats (jpg, png, webp, etc.)
  • Videos: MP4, WebM, OGG, and MOV formats
  • GIFs: Automatically detected and rendered as animated images with play/pause support
  • The component includes automatic fallback handling for unsupported formats

HeroBadge​

PropTypeDefaultDescription
childrenReact.ReactNoderequiredBadge text content
iconLucideIcon-Optional icon component
variant'default' | 'glass' | 'solid' | 'outline''default'Badge visual variant
classNamestring-Custom className

HeroFeatures​

PropTypeDefaultDescription
featuresstring[]requiredArray of feature text strings
variant'default' | 'glass''default'Feature pills variant
classNamestring-Custom className

HeroGlassCard​

PropTypeDefaultDescription
childrenReact.ReactNoderequiredCard content
classNamestring-Custom className

HeroStats​

PropTypeDefaultDescription
statsStatItem[]requiredArray of stat items with value, label, and optional icon
variant'default' | 'cards' | 'minimal''default'Stats display variant
columns2 | 3 | 44Number of columns in grid
classNamestring-Custom className

StatItem​

PropTypeDescription
valuestringrequired - Stat value (e.g., "10K+")
labelstringrequired - Stat label (e.g., "Active Users")
iconLucideIconOptional icon component (only displayed when HeroStats variant is "cards")

HeroCarousel​

PropTypeDefaultDescription
slidesHeroCarouselSlide[]requiredArray of carousel slides
autoRotatebooleanfalseEnable automatic slide rotation
rotationIntervalnumber3000Time interval in milliseconds between auto-rotations (clamped between 1000-5000ms)
showNavigationbooleanfalseShow previous/next navigation buttons
showDotsbooleanfalseShow dot indicators for slide navigation
variant'default' | 'dark''dark'Background gradient variant
animationTypeHeroProps["animationType"]'fadeIn'Animation type for content elements
containerSize'small' | 'normal' | 'large' | 'full' | 'readable''full'Container max width
classNamestring-Custom className

HeroCarouselSlide​

PropTypeDescription
idstringOptional unique identifier for the slide
srcstringImage or video source URL (preferred over image or video)
imagestringImage source URL (alternative to src)
videostringVideo source URL (alternative to src)
overlayOpacitynumberOverlay opacity (0-100) for the slide background
contentReact.ReactNoderequired - Slide content (typically HeroContent with HeroHeading, HeroSubheading, etc.)

Note: The carousel supports infinite looping with seamless transitions. When autoRotate is enabled, slides automatically advance at the specified rotationInterval. The carousel pauses on hover when auto-rotation is active.