ExploreComponents 3D architecture Observability

DocumentationDocs home Installation CLI Theming API reference Contributing

DeveloperRegistry API OpenAPI MCP server

nyuchimzizi

Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.

mukoko — consumermukoko.com weather news lingo nhimbe shamwari

nyuchi — enterprisenyuchi.com bushtrade

Built by Nyuchi Africav4.0.39

Source Code

View the full component source code below.

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 }

Source Code

View the full component source code below.

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 }