@ajk-ui/header

A flexible header component for React applications with built-in navigation and hero section support.

Installation

npm install @ajk-ui/header
# or
yarn add @ajk-ui/header
# or
pnpm add @ajk-ui/header

Usage

import { Header } from "@ajk-ui/header";

function MyComponent() {
  const navItems = [
    { label: "Home", href: "/" },
    { label: "About", href: "/about" },
    { label: "Contact", href: "/contact" },
  ];

  return (
    <Header
      title="Welcome"
      subtitle="Discover amazing things"
      backgroundImage="/hero.jpg"
      variant="hero"
      navItems={navItems}
      cta={{ label: "Get Started", href: "/start" }}
    />
  );
}

Features

• Multiple variants (hero, simple, transparent)
• Integrated navigation
• Hero section support
• Background image support
• Call-to-action button
• Responsive design
• Theme integration
• TypeScript support

Props

| Prop | Type | Default | Description | | --------------- | ----------------------------------- | --------- | ------------------------ | | variant | 'hero' | 'simple' | 'transparent' | 'simple' | Header style variant | | title | string | required | Header title | | subtitle | string | undefined | Optional subtitle | | backgroundImage | string | undefined | URL for background image | | navItems | NavItem[] | [] | Navigation items | | cta | CTAButton | undefined | Call-to-action button | | height | 'sm' | 'md' | 'lg' | 'md' | Header height | | className | string | undefined | Additional CSS classes |

Types

interface NavItem {
  label: string;
  href: string;
}

interface CTAButton {
  label: string;
  href: string;
  variant?: 'solid' \| 'outline';
}

Examples

Hero Header

<Header
  variant="hero"
  title="Welcome to Our Site"
  subtitle="Discover amazing features"
  backgroundImage="/hero-bg.jpg"
  navItems={[
    { label: "Home", href: "/" },
    { label: "Features", href: "/features" },
    { label: "Contact", href: "/contact" },
  ]}
  cta={{ label: "Get Started", href: "/start" }}
  height="lg"
/>

Simple Header

<Header
  variant="simple"
  title="Company Name"
  navItems={[
    { label: "About", href: "/about" },
    { label: "Services", href: "/services" },
  ]}
/>

Transparent Header

<Header
  variant="transparent"
  title="Brand"
  navItems={navItems}
  className="absolute top-0 left-0 right-0"
/>

Customization

Customize header styles using Tailwind CSS:

<Header
  className="bg-gradient-to-r from-blue-500 to-purple-500"
  title="Custom Header"
/>

Version History

Current version: 0.2.2

See Changelog for details about changes and updates.

License

MIT © [Your Name]