Header Component

The Header component is a key part of your application's navigation system.

Overview

The Header component provides navigation for your application, including links to important pages and authentication controls. It's designed to be responsive and customizable.

Usage

Import and use the Header component in your layout or page:

tsx

import Header from "@/components/Header";

export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  );
}

Props

The Header component accepts the following props:

Prop	Type	Default	Description
links	NavLink[]	[]	Navigation links to display in the header
logo	ReactNode	Default logo	Custom logo component
showAuth	boolean	true	Whether to show authentication buttons
transparent	boolean	false	Whether the header should have a transparent background

Examples

Basic Header

tsx

<Header />

Custom Navigation Links

tsx

const navLinks = [
  { label: "Home", href: "/" },
  { label: "Features", href: "/features" },
  { label: "Pricing", href: "/pricing" },
  { label: "Blog", href: "/blog" },
];

<Header links={navLinks} />

Transparent Header for Hero Sections

tsx

<Header transparent={true} />

Customization

You can customize the Header component by modifying its source code in:

text

/components/Header.tsx

Common customizations include:

Changing the logo
Modifying the navigation links
Adjusting the styling and colors
Adding additional elements like search or notifications

Implementation Details

The Header component is implemented with the following features:

Responsive design that works on mobile and desktop
Mobile menu with smooth animations
Active link highlighting
Integration with authentication state
Optional transparent mode for hero sections