@versini/ui-header

A flexible and accessible React header component built with TypeScript and TailwindCSS.

The Header component provides a semantic header element with support for sticky positioning, multiple theme modes, and customizable styling options. Perfect for page headers, navigation bars, and top-level content.

Table of Contents

• Features
• Installation
• Usage
• API

Features

• 🎯 Sticky Positioning: Optional sticky header behavior
• ♿ Semantic HTML: Uses proper <header> element for accessibility
• 🎨 Customizable: Multiple themes, borders, and spacing options
• 🌲 Tree-shakeable: Lightweight and optimized for bundle size
• 🔧 TypeScript: Fully typed with comprehensive prop definitions
• 🎭 Theme Support: Built-in support for light, dark, and system themes

Installation

npm install @versini/ui-header

Note: This component requires TailwindCSS and the @versini/ui-styles plugin for proper styling. See the installation documentation for complete setup instructions.

Usage

Basic Header

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

function App() {
  return (
    <Header>
      <h1>My Website</h1>
    </Header>
  );
}

Sticky Header

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

function App() {
  return (
    <Header sticky>
      <nav className="flex justify-between items-center">
        <h1>Brand</h1>
        <ul className="flex space-x-4">
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        </ul>
      </nav>
    </Header>
  );
}

Custom Styled Header

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

function App() {
  return (
    <Header
      mode="dark"
      className="bg-blue-900 text-white shadow-lg"
      noBorder
      sticky
    >
      <div className="container mx-auto flex justify-between items-center">
        <div className="flex items-center space-x-2">
          <img src="/logo.png" alt="Logo" className="h-8 w-8" />
          <h1 className="text-xl font-bold">My App</h1>
        </div>
        <button className="bg-blue-700 px-4 py-2 rounded">Get Started</button>
      </div>
    </Header>
  );
}

Navigation Header

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

function NavigationHeader() {
  return (
    <Header sticky className="shadow-md">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <div className="flex-shrink-0">
              <h1 className="text-xl font-bold">Your Brand</h1>
            </div>
          </div>

          <nav className="hidden md:block">
            <ul className="flex space-x-8">
              <li>
                <a href="/" className="hover:text-blue-600">
                  Home
                </a>
              </li>
              <li>
                <a href="/products" className="hover:text-blue-600">
                  Products
                </a>
              </li>
              <li>
                <a href="/about" className="hover:text-blue-600">
                  About
                </a>
              </li>
              <li>
                <a href="/contact" className="hover:text-blue-600">
                  Contact
                </a>
              </li>
            </ul>
          </nav>

          <div className="flex items-center space-x-4">
            <button className="text-gray-600 hover:text-gray-900">
              Sign In
            </button>
            <button className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
              Sign Up
            </button>
          </div>
        </div>
      </div>
    </Header>
  );
}

Simple Page Header

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

function SimplePageHeader() {
  return (
    <Header noBorder noMargin>
      <div className="text-center py-8">
        <h1 className="text-4xl font-bold text-gray-900 mb-2">
          Welcome to Our Platform
        </h1>
        <p className="text-xl text-gray-600">
          The best solution for your business needs
        </p>
      </div>
    </Header>
  );
}

Dark Theme Header

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

function DarkThemeHeader() {
  return (
    <Header
      mode="dark"
      sticky
      className="bg-gray-900 text-white border-gray-800"
    >
      <div className="container mx-auto flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <div className="w-8 h-8 bg-blue-500 rounded"></div>
          <span className="text-lg font-semibold">DarkApp</span>
        </div>

        <nav>
          <ul className="flex space-x-6">
            <li>
              <a href="#" className="hover:text-blue-400">
                Dashboard
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-blue-400">
                Analytics
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-blue-400">
                Settings
              </a>
            </li>
          </ul>
        </nav>

        <div className="w-8 h-8 bg-gray-600 rounded-full"></div>
      </div>
    </Header>
  );
}

Minimal Header

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

function MinimalHeader() {
  return (
    <Header noColors noBorder noPadding className="py-2">
      <div className="text-center">
        <h1 className="text-2xl font-light text-gray-800">Minimal Design</h1>
      </div>
    </Header>
  );
}

Header with Search

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

function HeaderWithSearch() {
  return (
    <Header sticky className="bg-white shadow-sm">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center justify-between h-16 px-4">
          <div className="flex items-center flex-1">
            <h1 className="text-xl font-bold mr-8">SearchApp</h1>

            <div className="flex-1 max-w-lg">
              <div className="relative">
                <input
                  type="search"
                  placeholder="Search..."
                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center">
                  <svg
                    className="h-5 w-5 text-gray-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </div>

          <div className="flex items-center space-x-4">
            <button className="p-2 text-gray-600 hover:text-gray-900">
              Notifications
            </button>
            <div className="w-8 h-8 bg-blue-500 rounded-full"></div>
          </div>
        </div>
      </div>
    </Header>
  );
}

Raw Header (Unstyled)

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

function RawHeader() {
  return (
    <Header raw className="my-custom-header-styles">
      <div className="completely-custom-layout">
        Custom header with no default styles
      </div>
    </Header>
  );
}

API

Header Props

| Prop | Type | Default | Description | | --------- | ----------------------------------------------- | ---------- | -------------------------------------------------- | | children | React.ReactNode | - | The children to render | | mode | "dark" \| "light" \| "system" \| "alt-system" | "system" | The mode of Header (controls background color) | | sticky | boolean | false | Whether to render with sticky behavior | | noColors | boolean | false | Whether to render without background colors | | noBorder | boolean | false | Whether to render without a border | | noMargin | boolean | false | Whether to render without margin | | noPadding | boolean | false | Whether to render without padding | | raw | boolean | false | Whether to render with no styles | | className | string | - | CSS class(es) to add to the main component wrapper |

Also supports all standard HTML header element attributes