Page header

Pro

The top of every page that isn't a thread: where you are (breadcrumb), what the page is, what you can do here (actions), and its views (tabs). Tabs are a nav of views over the same page, marked with aria-current; counts appear only when the service gave one.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/page-header

Brings in: locale, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { Plus } from "lucide-react"
import { PageHeader, type PageTab } from "@/components/page-header"
import { Button } from "@/components/ui/button"

const tabs: PageTab[] = [
  { id: "open", label: "Open", count: 3 },
  { id: "applied", label: "Applied", count: 18 },
  { id: "rolled-back", label: "Rolled back" },
]

export default function Example() {
  const [tab, setTab] = React.useState("open")
  return (
    <div className="max-w-2xl overflow-hidden rounded-lg border">
      <PageHeader
        breadcrumb={[{ label: "Acme", onClick: () => {} }, { label: "Storefront", onClick: () => {} }]}
        title="Migrations"
        description="Schema changes the agents have proposed or applied."
        actions={
          <Button size="sm">
            <Plus /> New migration
          </Button>
        }
        tabs={tabs}
        activeTab={tab}
        onTabChange={setTab}
      />
    </div>
  )
}

<PageHeader>

Prop	Type	Default	Description
titlerequired	`string`	—	What the page is, as its heading.
description	`React.ReactNode \| undefined`	—	A line under the title saying what the page is for.
breadcrumb	`Crumb[] \| undefined`	—	Where the page sits, from the top; a crumb with onClick is a link back.
actions	`React.ReactNode \| undefined`	—	Buttons for what you can do here, right of the title.
tabs	`PageTab[] \| undefined`	—	Views of the page, shown under the title; a count shows only when given.
activeTab	`string \| undefined`	—	The id of the current view, marked with aria-current.
onTabChange	`((id: string) => void) \| undefined`	—	Called with a view's id when its tab is chosen.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under pageHeader in <LocaleProvider strings={{ … }}>; the table is exported as pageHeaderStrings.

Key	English
breadcrumb	Breadcrumb
views	{title} views

Types

Crumb: { label: string; onClick?: (() => void) | undefined }
PageTab: { id: string; label: string; count?: number | undefined }