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

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

<PreviewAndCode title="Section header example" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-headers/section-header-search-input-with-tabs" height={391} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-headers/SectionHeaderSearchInputWithTabs" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation


You can add this section header component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add section-headers
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/section-headers" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the section headers in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>
<Divider />

## Section header examples

Below are examples and variations of this section header component:

### Section header buttons {{ tocOnly:true }}

<PreviewAndCode title="Section header buttons" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-headers/section-header-buttons" height={327} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-headers/SectionHeaderButtons" />
    </TabPanel>
</PreviewAndCode>

### Section header search input {{ tocOnly:true }}

<PreviewAndCode title="Section header search input" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-headers/section-header-search-input" height={327} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-headers/SectionHeaderSearchInput" />
    </TabPanel>
</PreviewAndCode>

### Section header button group {{ tocOnly:true }}

<PreviewAndCode title="Section header button group" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-headers/section-header-button-group" height={327} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-headers/SectionHeaderButtonGroup" />
    </TabPanel>
</PreviewAndCode>

### Section header buttons with tabs {{ tocOnly:true }}

<PreviewAndCode title="Section header buttons with tabs" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-headers/section-header-buttons-with-tabs" height={391} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-headers/SectionHeaderButtonsWithTabs" />
    </TabPanel>
</PreviewAndCode>

### Section header search input with tabs {{ tocOnly:true }}

<PreviewAndCode title="Section header search input with tabs" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-headers/section-header-search-input-with-tabs" height={391} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-headers/SectionHeaderSearchInputWithTabs" />
    </TabPanel>
</PreviewAndCode>

### Section header button groups with tabs {{ tocOnly:true }}

<PreviewAndCode title="Section header button groups with tabs" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-headers/section-header-button-groups-with-tabs" height={391} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-headers/SectionHeaderButtonGroupsWithTabs" />
    </TabPanel>
</PreviewAndCode>