PageHeader Component

Consistent page headers with title display and optional background banners. Supports main page titles and subnav headers with customizable styling.

Interactive Preview

Live component with different configuration options. Switch between variants and toggle code view.

Component Examples

Select different variants to see how props affect the component behavior

Example:

Preview

Welcome to the Dashboard

Props

Component accepts the following props for configuration and behavior.

Prop	Type	Required	Default	Description
variant	"main" \| "subnav"	Required	—	Header style variant - main for standard pages, subnav for banner-style headers
title	string	Required	—	Page title text to display in the header
isVisible	boolean	Required	—	Controls header visibility - returns null when false
backgroundColor	string	Optional	#88d1d4	Background color for subnav variant

Type Definitions

PageHeaderProps

Configuration interface for PageHeader component

interface PageHeaderProps {
  variant: 'main' | 'subnav'
  title: string
  isVisible: boolean
  backgroundColor?: string
}

Usage Examples

Common patterns and implementation examples.

Dashboard Page Header

import { PageHeader } from '@/components/shared/page-header'

export default function DashboardPage() {
  return (
    <>
      <PageHeader
        variant="main"
        title="Dashboard Overview"
        isVisible={true}
      />
      <div className="p-8">
        {/* Page content */}
      </div>
    </>
  )
}

Subnav Page with Banner

import { PageHeader } from '@/components/shared/page-header'

export default function ReportsPage() {
  return (
    <>
      <PageHeader
        variant="subnav"
        title="Financial Reports"
        isVisible={true}
      />
      <div className="p-8">
        {/* Reports content */}
      </div>
    </>
  )
}

Conditional Header Display

import { PageHeader } from '@/components/shared/page-header'

export default function ConditionalPage() {
  const [showHeader, setShowHeader] = useState(true)
  
  return (
    <>
      <PageHeader
        variant="main"
        title="Conditional Header"
        isVisible={showHeader}
      />
      <button onClick={() => setShowHeader(!showHeader)}>
        Toggle Header
      </button>
    </>
  )
}