Page Header Layout

Heroes

About

A page section layout with a bordered header area for a title, description and optional aside action, plus a max-width content wrapper for the page body.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Page Header Layout to your project and fits it to your theme.

Code

How Page Header Layout is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  PageContent,
  PageHeader,
  PageTitle,
} from "@/components/ui/page-header-layout";

export default function PageHeaderLayoutDemo() {
  return (
    <div className="w-full bg-background text-foreground">
      <PageHeader
        aside={
          <button className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground">
            Get started
          </button>
        }
      >
        <PageTitle
          title="Build faster with <b>Acme Components</b>"
          description="A collection of accessible, themeable building blocks for your next product."
        />
      </PageHeader>
      <PageContent>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <div className="rounded-lg border p-4">
            <h3 className="font-medium">Fast setup</h3>
            <p className="text-sm text-muted-foreground">
              Install and start building in minutes.
            </p>
          </div>
          <div className="rounded-lg border p-4">
            <h3 className="font-medium">Accessible</h3>
            <p className="text-sm text-muted-foreground">
              Built with accessibility in mind from day one.
            </p>
          </div>
          <div className="rounded-lg border p-4">
            <h3 className="font-medium">Themeable</h3>
            <p className="text-sm text-muted-foreground">
              Customize every token to match your brand.
            </p>
          </div>
        </div>
      </PageContent>
    </div>
  );
}