Components / Patterns

Page header

The one page title every Intelligo page renders: heading, description and actions.

Team

Invite people to the workspace and choose what each of them can do.

API keys

A section title under a layout that already names the page.

pnpm exec shadcn add @intelligo/page-header

Inside an app made by intelligo create, or any shadcn project that names the registry.

built on

Nothing else from the registry.

used by these pages

Team Settings, Usage, Settings Shell, Workspace Settings, Notifications, Billing Settings, Profile Settings, Artifacts, Privacy Settings

more in patterns

Stat card, Status badge, Copy button, Document viewer

Source

What shadcn add writes to components/ui/page-header.tsx. It is yours from then on.

import * as React from "react";

import { cn } from "@showcase/lib/utils";

/**
 * The one page title every page renders: a heading, an optional
 * description, and actions that wrap under the heading on narrow screens.
 */
function PageHeader({ className, ...props }: React.ComponentProps<"header">) {
  return (
    <header
      data-slot="page-header"
      className={cn(
        "flex flex-wrap items-start justify-between gap-x-6 gap-y-3",
        className
      )}
      {...props}
    />
  );
}

function PageHeaderContent({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="page-header-content"
      className={cn("flex min-w-0 flex-col gap-1", className)}
      {...props}
    />
  );
}

function PageHeaderTitle({
  className,
  level = 1,
  ...props
}: React.ComponentProps<"h1"> & {
  /**
   * 1 for the page's title; 2 for a section rendered under a layout that
   * already carries it (a settings tab under "Settings").
   */
  level?: 1 | 2;
}) {
  const Heading = level === 2 ? "h2" : "h1";
  return (
    <Heading
      data-slot="page-header-title"
      data-level={level}
      className={cn(
        "font-semibold tracking-tight text-balance",
        level === 2 ? "text-lg" : "text-2xl",
        className
      )}
      {...props}
    />
  );
}

function PageHeaderDescription({
  className,
  ...props
}: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="page-header-description"
      className={cn("max-w-prose text-sm text-muted-foreground", className)}
      {...props}
    />
  );
}

function PageHeaderActions({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="page-header-actions"
      className={cn("flex shrink-0 flex-wrap items-center gap-2", className)}
      {...props}
    />
  );
}

export {
  PageHeader,
  PageHeaderContent,
  PageHeaderTitle,
  PageHeaderDescription,
  PageHeaderActions,
};

Ready to try it? Three commands and the app runs against a stub model.

GitHubDocsGet started