"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; import { ChevronRightIcon } from "@kineticui/icons"; export type PageHeaderProps = { breadcrumbs?: { label: string; href?: string }[]; title: React.ReactNode; description?: React.ReactNode; /** Icon or avatar left of the title. */ icon?: React.ReactNode; /** Small chips next to the title, e.g. status badges. */ badges?: React.ReactNode; /** Buttons on the right. */ actions?: React.ReactNode; /** Key facts under the title: [{ label, value }]. */ meta?: { label: string; value: React.ReactNode }[]; tabs?: { value: string; label: string; count?: number }[]; activeTab?: string; onTabChange?: (v: string) => void; /** Stick to the top and shrink on scroll. */ sticky?: boolean; className?: string; }; /** App page header: breadcrumbs, icon, title + badges, actions, meta row and underline tabs. */ export function PageHeader({ breadcrumbs, title, description, icon, badges, actions, meta, tabs, activeTab, onTabChange, sticky, className }: PageHeaderProps) { const id = React.useId(); return (

{breadcrumbs?.length ? ( ) : null}

{icon ? {icon} : null}

{title}

{badges}

{description ?

{description}

: null}

{actions ?

{actions}

: null}

{meta?.length ? (

{m.label}: {m.value}

) : null} {tabs?.length ? ( ) : null}

); }

Page Header

Installation

Exports