@darksnow-ui/header

A flexible header component for DarkSnow UI with customizable layout, height variants, and styling options.

Installation

npm install @darksnow-ui/header

Usage

import { Header } from "@darksnow-ui/header"
import "@darksnow-ui/header/css"

function App() {
  return (
    <Header
      logo={<img src="/logo.svg" alt="Logo" />}
      title="My Application"
      actions={
        <>
          <button>Sign In</button>
          <button>Sign Up</button>
        </>
      }
      height="md"
      variant="default"
    />
  )
}

Props

| Prop | Type | Default | Description | | ----------- | ------------------------------------------ | ----------- | -------------------------------------------- | | logo | ReactNode | - | Logo element to display on the left side | | title | string | - | Title text to display next to the logo | | actions | ReactNode | - | Action elements to display on the right side | | className | string | - | Additional CSS classes | | height | 'sm' \| 'md' \| 'lg' | 'md' | Height variant (48px, 64px, 80px) | | variant | 'default' \| 'transparent' \| 'bordered' | 'default' | Visual variant |

Variants

Height Variants

• sm: 48px height
• md: 64px height (default)
• lg: 80px height

Style Variants

• default: White background with shadow
• transparent: Transparent background
• bordered: White background with bottom border

Dark Mode

The component automatically adapts to dark mode using CSS media queries.