nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Standard page header with breadcrumbs, title, description, and action slot.
No interactive demo is registered for this component yet — the source is shown directly.
import * as React from "react"
import { ArrowLeftIcon, ChevronRightIcon } from "@/lib/icons"
import { cn } from "@/lib/utils"
interface BreadcrumbItem {
label: string
href?: string
}
function PageHeader({
className,
title,
description,
breadcrumbs,
actions,
backHref,
...props
}: React.ComponentProps<"div"> & {
title: string
description?: string
breadcrumbs?: BreadcrumbItem[]
actions?: React.ReactNode
backHref?: string
}) {
return (
<div data-slot="page-header" data-portal="https://design.nyuchi.com/components/page-header" className={cn("flex flex-col gap-4 pb-6", className)} {...props}>
{breadcrumbs && breadcrumbs.length > 0 && (
<nav aria-label="breadcrumb" data-slot="page-header-breadcrumbs">
<ol className="flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground">
{breadcrumbs.map((crumb, index) => (
<li key={index} className="inline-flex items-center gap-1.5">
{index > 0 && <ChevronRightIcon className="size-3.5" aria-hidden="true" />}
{crumb.href && index < breadcrumbs.length - 1 ? (
<a href={crumb.href} className="transition-colors hover:text-foreground">
{crumb.label}
</a>
) : (
<span
className={cn(
index === breadcrumbs.length - 1 && "font-medium text-foreground"
)}
aria-current={index === breadcrumbs.length - 1 ? "page" : undefined}
>
{crumb.label}
</span>
)}
</li>
))}
</ol>
</nav>
)}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-3">
{backHref && (
<a
href={backHref}
className="inline-flex size-9 items-center justify-center rounded-[var(--radius-lg,14px)] text-muted-foreground transition-colors hover:text-foreground"
aria-label="Go back"
>
<ArrowLeftIcon className="size-4" />
</a>
)}
<div className="flex flex-col gap-1">
<h1
data-slot="page-header-title"
className="font-serif text-2xl font-semibold tracking-tight sm:text-3xl"
>
{title}
</h1>
{description && (
<p
data-slot="page-header-description"
className="text-sm text-muted-foreground sm:text-base"
>
{description}
</p>
)}
</div>
</div>
{actions && (
<div data-slot="page-header-actions" className="flex shrink-0 items-center gap-2">
{actions}
</div>
)}
</div>
</div>
)
}
export { PageHeader }
export type { BreadcrumbItem }
The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.
Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.
/api/v1/ui/page-headernpx shadcn@latest add https://mzizi.dev/api/v1/ui/page-headercomponents/ui/page-header.tsx