import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs, Button } from "@photon-ai/kumo-solid";
import { HouseIcon, CodeIcon, GlobeIcon } from "~/components/icons";

// Full-featured hero demo matching original
export function PageHeaderHeroDemo() {
  return (
    <PageHeader
      className="w-full"
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href="#">
            Workers & Pages
          </Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>cloudflare-dev-platform</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      tabs={[
        { label: "Overview", value: "overview" },
        { label: "Metrics", value: "metrics" },
        { label: "Deployments", value: "deployments" },
        { label: "Bindings", value: "bindings" },
        { label: "Observability", value: "observability" },
        { label: "Settings", value: "settings" },
      ]}
      defaultTab="overview"
      onValueChange={(v) => console.log(v)}
    >
      <Button icon={<CodeIcon />} className="h-8">
        Edit code
      </Button>
      <Button icon={<GlobeIcon />} variant="primary" className="h-8">
        Visit
      </Button>
    </PageHeader>
  );
}

Installation

PageHeader is a block: a source-distributed Solid component that you own and customize.

The published Kumo CLI currently emits React source. Until a Solid-aware installer is available, copy this block from the repository.

1. Copy the Solid block directory

packages/kumo-docs-astro/src/components/kumo/page-header/

2. Import from your local path

import { PageHeader } from "./components/kumo/page-header/page-header";

Usage

import { PageHeader } from "./components/kumo/page-header/page-header";
import { Breadcrumbs } from "@photon-ai/kumo-solid";

export default function Example() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>My Project</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      tabs={[
        { label: "Overview", value: "overview" },
        { label: "Settings", value: "settings" },
      ]}
      defaultTab="overview"
      onValueChange={(value) => {
        console.log(value);
      }}
    />
  );
}

Examples

Basic

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs } from "@photon-ai/kumo-solid";

// Basic breadcrumbs-only demo
export function PageHeaderBasicDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>
        </Breadcrumbs>
      }
    />
  );
}

With Icons

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs } from "@photon-ai/kumo-solid";
import { HouseIcon, GearIcon } from "~/components/icons";

// With icons in breadcrumbs
export function PageHeaderWithIconsDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link icon={<HouseIcon size={16} />} href="#">
            Home
          </Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current icon={<GearIcon size={16} />}>
            Settings
          </Breadcrumbs.Current>
        </Breadcrumbs>
      }
    />
  );
}

With Tabs

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs } from "@photon-ai/kumo-solid";

// With tabs
export function PageHeaderWithTabsDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>Settings</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      tabs={[
        { label: "General", value: "general" },
        { label: "Security", value: "security" },
        { label: "Notifications", value: "notifications" },
      ]}
      defaultTab="general"
    />
  );
}

With Actions

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs, Button } from "@photon-ai/kumo-solid";

// With actions
export function PageHeaderWithActionsDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>My Project</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      tabs={[
        { label: "Overview", value: "overview" },
        { label: "Settings", value: "settings" },
      ]}
      defaultTab="overview"
    >
      <Button variant="primary" size="base">
        Deploy
      </Button>
    </PageHeader>
  );
}

With Title

Page title

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs } from "@photon-ai/kumo-solid";

// With title only
export function PageHeaderWithTitleDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      title="Page title"
    />
  );
}

With Title and Description

Page title

Action-led, value-oriented description of what this page does. Optional second sentence with use cases or prerequisites.

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs } from "@photon-ai/kumo-solid";

// With title and description
export function PageHeaderWithTitleDescriptionDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      title="Page title"
      description="Action-led, value-oriented description of what this page does. Optional second sentence with use cases or prerequisites."
    />
  );
}

Complete Example

Combining breadcrumbs, title, description, tabs, and actions.

Page title

Action-led, value-oriented description of what this page does.

import { PageHeader } from "../kumo/page-header/page-header";
import { Breadcrumbs, Button } from "@photon-ai/kumo-solid";
import { PlusIcon } from "~/components/icons";

// Complete example with all features
export function PageHeaderCompleteDemo() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Link href="#">Products</Breadcrumbs.Link>
          <Breadcrumbs.Separator />
          <Breadcrumbs.Current>Page title</Breadcrumbs.Current>
        </Breadcrumbs>
      }
      title="Page title"
      description="Action-led, value-oriented description of what this page does."
      tabs={[
        { label: "Overview", value: "overview" },
        { label: "Analytics", value: "analytics" },
        { label: "Settings", value: "settings" },
      ]}
      defaultTab="overview"
    >
      <Button variant="outline" size="sm">
        Export
      </Button>
      <Button variant="primary" size="sm" icon={<PlusIcon size={16} />}>
        New Item
      </Button>
    </PageHeader>
  );
}

API Reference

Prop	Type	Default	Description
spacing	`"compact" \| "base" \| "relaxed"`	`"base"`	-
breadcrumbs	`JSX.Element`	-	-
title	`string`	-	-
description	`string`	-	-
tabs	`TabsItem[]`	-	-
defaultTab	`string`	-	-
className	`string`	-	-
children	`JSX.Element`	-	-

TabsItem

Property	Type
label	string
value	string

Kumo

Kumo

Page Header

Page title

Page title

Page title