export const title = "Page header components"
export const description = "Powerful and customizable React page header components built for modern applications and websites. These page headers are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/page-headers/page-headers.demo.tsx";

<PreviewAndCode title="Page header example" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/page-headers/page-header-banner-avatar" height={526} className="rounded-[16px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="page-headers/PageHeaderBannerAvatar" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

These page header components do not require any installation, just copy and paste into your project once you've set up Untitled UI. Check out our [installation guide](/docs/installation) to get started.

<Divider />

## Page header examples

Below are examples and variations of this page header component:

### Simple {{ tocOnly:true }}

<PreviewAndCode title="Simple" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/page-headers/page-header-simple" height={378} className="rounded-[16px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="page-headers/PageHeaderSimple" />
    </TabPanel>
</PreviewAndCode>

### Avatar {{ tocOnly:true }}

<PreviewAndCode title="Avatar" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/page-headers/page-header-avatar" height={378} className="rounded-[16px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="page-headers/PageHeaderAvatar" />
    </TabPanel>
</PreviewAndCode>

### Banner simple {{ tocOnly:true }}

<PreviewAndCode title="Banner simple" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/page-headers/page-header-banner-simple" height={526} className="rounded-[16px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="page-headers/PageHeaderBannerSimple" />
    </TabPanel>
</PreviewAndCode>

### Banner avatar {{ tocOnly:true }}

<PreviewAndCode title="Banner avatar" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/page-headers/page-header-banner-avatar" height={526} className="rounded-[16px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="page-headers/PageHeaderBannerAvatar" />
    </TabPanel>
</PreviewAndCode>

### Banner simple centered {{ tocOnly:true }}

<PreviewAndCode title="Banner simple centered" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/page-headers/page-header-banner-simple-centered" height={526} className="rounded-[16px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="page-headers/PageHeaderBannerSimpleCentered" />
    </TabPanel>
</PreviewAndCode>

### Banner avatar centered {{ tocOnly:true }}

<PreviewAndCode title="Banner avatar centered" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/page-headers/page-header-banner-avatar-centered" height={658} className="rounded-[16px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="page-headers/PageHeaderBannerAvatarCentered" />
    </TabPanel>
</PreviewAndCode>