Installation

PageHeader is a <strong>block</strong> - a CLI-installed component that you
own and can customize. Unlike regular components, blocks are copied into
your project so you have full control over the code.



  **1. Initialize Kumo config (first time only)**

npx @cloudflare/kumo init

2. Install the block

npx @cloudflare/kumo add PageHeader

3. Import from your local path

// The path depends on your kumo.json blocksDir setting
// Default: src/components/kumo/

Usage

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

With Icons

With Tabs

With Actions

With Title

With Title and Description

Complete Example

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

API Reference

TabsItem

<table class="w-full text-sm">
  <thead>
    <tr class="border-b border-kumo-hairline">
      <th class="px-4 py-3 text-left font-semibold">Property</th>
      <th class="px-4 py-3 text-left font-semibold">Type</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono text-xs">label</td>
      <td class="px-4 py-3 font-mono text-xs">string</td>
    </tr>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono text-xs">value</td>
      <td class="px-4 py-3 font-mono text-xs">string</td>
    </tr>
  </tbody>
</table>