Page Header
The title row of a page: breadcrumbs, title, status, actions and optional page tabs.
heron
Liveheron.sproutboat.app
<PageHeader
title="heron"
status={<StatusDot tone="success" live label="Live" />}
description="heron.sproutboat.app"
actions={<Button variant="primary">Deploy</Button>}
/>Props
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/page-header.jsonThe CLI writes components/ikada/page-header.tsx and merges the ikada theme into your CSS. Or take it from the package: import { PageHeader, PageTabs, PageTab } from "@sproutboat/ikada";
Usage
import { PageHeader, PageTabs, PageTab } from "@/components/ikada/page-header";
<PageHeader
title="heron"
status={<StatusDot tone="success" live label="Live" />}
description="heron.sproutboat.app"
actions={<Button variant="primary">Deploy</Button>}
/>Examples
robin
robin.sproutboat.app
<PageHeader
headingLevel="h3"
title="robin"
description="robin.sproutboat.app"
actions={
<>
<Button>Visit</Button>
<Button variant="primary">Deploy</Button>
</>
}
/>wren
Liveeu-west · main · 3 minutes ago
<PageHeader
headingLevel="h3"
breadcrumbs={
<Breadcrumbs
items={[
{ label: "Sproutboat", href: "/" },
{ label: "wren", href: "/sprouts/wren" },
{ label: "Overview" },
]}
/>
}
title="wren"
status={<StatusDot tone="success" live label="Live" />}
description="eu-west · main · 3 minutes ago"
/>finch
Buildingfinch.sproutboat.app
<PageHeader
headingLevel="h3"
title="finch"
status={<Badge tone="info">Building</Badge>}
description="finch.sproutboat.app"
actions={<Button variant="primary">Deploy</Button>}
tabs={
<PageTabs>
<PageTab href="/sprouts/finch" current>
Overview
</PageTab>
<PageTab href="/sprouts/finch/deployments">Deployments</PageTab>
<PageTab href="/sprouts/finch/logs">Logs</PageTab>
<PageTab href="/sprouts/finch/settings">Settings</PageTab>
</PageTabs>
}
/>Props
| Prop | Type | Description |
|---|---|---|
| breadcrumbs | ReactNode | Usually <Breadcrumbs />. |
| titlerequired | ReactNode | Page title, rendered as the h1. |
| status | ReactNode | Next to the title: a StatusDot or Badge. |
| description | ReactNode | One muted line under the title: domain, repo, branch. |
| actions | ReactNode | Buttons, right-aligned; they wrap under the title on narrow screens. |
| tabs | ReactNode | Usually <PageTabs>. Sits on the header's bottom rule. |
| headingLevel | "h1" | "h2" | "h3" | "h4" | Heading level of the title. Default `h1`; use a lower level when the header is not the page's own title. |
Also takes every prop of Omit<ComponentProps<"header">, "title">.
| Prop | Type | Description |
|---|---|---|
| current | boolean | Marks the tab as the current page (aria-current and the underline). Default `false`. |
| render | ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}> | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className | string | Classes merged onto the root element, after ikada's own. |
Also takes every prop of WithClass<useRender.ComponentProps<"a">>.
| Prop | Type | Description |
|---|---|---|
| label | string | Default `Page sections`. |
Source: src/components/page-header.tsx