This guide covers the layout building blocks used to structure app pages: PageContent and PageHeader.

PageContent

A layout wrapper that constrains width and adds consistent spacing. Use it as the root container for a page.

• size: "full" (default), "md" (max-w-7xl), or "sm" (max-w-4)
• className: Optional extra classes

Install from the registry:

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @uvey/page-content
Copy

PageHeader

An app-style page header with:

• title: Page title (h1)
• primaryAction: Optional node (e.g. primary button or button group)
• navItems: Optional array of { href, label } rendered as underline tabs
• currentTab: Optional controlled tab value

import { PageHeader } from "@/registry/default/layouts/page-header";
import { Button } from "../ui/button";

export default function Particle() {
  return (
    <PageHeader
      title="Page Header"
      primaryAction={<Button>Primary Action</Button>}
      navItems={[
        { href: "/", label: "Home" },
        { href: "/about", label: "About" },
      ]}
    />
  );
}

Install from the registry:

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @uvey/page-header
Copy

Putting It Together

A typical app page structure:

1. PageContent (size "md" or "sm")
2. PageHeader (title + primary action + nav tabs)

All layout blocks are available in the registry under the layouts category for copy-paste or CLI install.