ComponentsLanding
Hero
Full-width hero section for landing pages with title, subtitle, and call-to-action buttons
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
Build beautiful interfaces
A modern React component library for building production-ready applications with speed and confidence.
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
Welcome to Nim UI
Code
<Hero title="Welcome to Nim UI" />With Background Image
Ship faster with confidence
Production-ready components built with accessibility and performance in mind.
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
Ready to get started?
Join thousands of developers building with Nim UI.
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 whetherhreforonClickis 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