Skip to content
Nim UI

Hero

The Hero component provides a prominent, full-width section typically placed at the top of a landing page. It supports a title, subtitle, primary and secondary call-to-action buttons, and an optional background image.

Import

import { Hero } from '@nim-ui/components';

Usage

Default Hero

Build beautiful interfaces

A modern React component library for building production-ready applications with speed and confidence.

Get StartedView Components
View Code 
<Hero
  title="Build beautiful interfaces"
  subtitle="A modern React component library for building production-ready applications with speed and confidence."
  primaryCta={{ label: "Get Started", href: "/getting-started/installation/" }}
  secondaryCta={{ label: "View Components", href: "/components/primitives/button/" }}
/>

Title Only

Hero with Title Only

Welcome to Nim UI
View Code 
<Hero title="Welcome to Nim UI" />

With Background Image

Hero with Background Image

Ship faster with confidence

Production-ready components built with accessibility and performance in mind.

Start Building
View Code 
<Hero
  title="Ship faster with confidence"
  subtitle="Production-ready components built with accessibility and performance in mind."
  primaryCta={{ label: "Start Building" }}
  backgroundImage="/images/hero-bg.jpg"
/>

With Click Handlers

Hero with Click Handlers

Ready to get started?

Join thousands of developers building with Nim UI.

Sign Up FreeLearn More
View Code 
<Hero
  title="Ready to get started?"
  subtitle="Join thousands of developers building with Nim UI."
  primaryCta={{
    label: "Sign Up Free",
    onClick: () => navigate('/signup'),
  }}
  secondaryCta={{
    label: "Learn More",
    onClick: () => scrollToSection('features'),
  }}
/>

Props

Name Type Default Description
title * string - Main heading text displayed prominently in the hero section
subtitle string - Supporting text displayed below the title
primaryCta { label: string; onClick?: () => void; href?: string } - Primary call-to-action button configuration
secondaryCta { label: string; onClick?: () => void; href?: string } - Secondary call-to-action button configuration
backgroundImage string - URL for an optional background image behind the hero content
className string - Additional CSS classes to apply to the root element

Usage Examples

Landing Page Header

function LandingPage() {
  return (
    <main>
      <Hero
        title="The React Component Library You've Been Waiting For"
        subtitle="24 production-ready components. Fully accessible. Dark mode built-in. TypeScript first."
        primaryCta={{
          label: "Get Started",
          href: "/docs/installation",
        }}
        secondaryCta={{
          label: "GitHub",
          href: "https://github.com/nim-ui",
        }}
      />
      {/* Rest of landing page */}
    </main>
  );
}

Product Launch

function ProductLaunch() {
  const handleSignup = () => {
    // Open signup modal
    setShowSignup(true);
  };


  return (
    <Hero
      title="Introducing Nim Pro"
      subtitle="Advanced components, premium themes, and priority support for teams."
      primaryCta={{
        label: "Start Free Trial",
        onClick: handleSignup,
      }}
      secondaryCta={{
        label: "View Pricing",
        href: "/pricing",
      }}
      backgroundImage="/images/gradient-bg.webp"
    />
  );
}

Minimal Hero

function MinimalHero() {
  return (
    <Hero
      title="Simple. Fast. Accessible."
      subtitle="Build better user interfaces with less code."
    />
  );
}

Accessibility

The Hero component follows accessibility best practices:

  • Uses semantic heading elements (<h1>) for the title
  • CTA buttons use proper <a> or <button> elements depending on whether href or onClick is provided
  • Background images are decorative and do not convey content, so they use aria-hidden
  • Text maintains sufficient contrast ratios against background images through overlay techniques
  • Supports keyboard navigation for all interactive elements
  • CTA - Standalone call-to-action section
  • Button - Interactive button component
  • Container - Responsive container layout