Page Header

A page-level title block with description and actions

Projects

Manage all the projects across your workspace.

import { Plus } from '@untitledui-pro/icons/solid';

import { Button } from '@/components/button';
import { PageHeader } from '@/components/page-header';

export default function PageHeaderPreview() {
  return (
    <PageHeader>
      <PageHeader.Content>
        <PageHeader.Title>Projects</PageHeader.Title>
        <PageHeader.Description>
          Manage all the projects across your workspace.
        </PageHeader.Description>
      </PageHeader.Content>
      <PageHeader.Actions>
        <Button variant="outline">Filter</Button>
        <Button>
          <Plus />
          New project
        </Button>
      </PageHeader.Actions>
    </PageHeader>
  );
}

Dependencies

Slot

Source Code

import { Slot } from '@/components/slot';
import { cn } from '@/lib/utils/classnames';

interface PageHeaderProps extends React.ComponentPropsWithRef<'div'> {
  asChild?: boolean;
}

const PageHeader = ({ ref, className, asChild, ...rest }: PageHeaderProps) => {
  const Comp = asChild ? Slot : 'div';
  return (
    <Comp
      ref={ref}
      className={cn(
        'flex flex-col gap-4 border-border border-b pb-6 md:flex-row md:items-start md:justify-between md:gap-6',
        className
      )}
      {...rest}
    />
  );
};

const PageHeaderContent = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'div'>) => (
  <div
    ref={ref}
    className={cn('flex min-w-0 flex-col gap-1', className)}
    {...rest}
  />
);

const PageHeaderTitle = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'h1'>) => (
  <h1
    ref={ref}
    className={cn(
      'text-balance font-semibold text-2xl text-foreground md:text-3xl',
      className
    )}
    {...rest}
  />
);

const PageHeaderDescription = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'p'>) => (
  <p
    ref={ref}
    className={cn(
      'max-w-2xl text-foreground-secondary text-sm md:text-base',
      className
    )}
    {...rest}
  />
);

const PageHeaderActions = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'div'>) => (
  <div
    ref={ref}
    className={cn(
      'flex shrink-0 flex-wrap items-center gap-2 md:justify-end',
      className
    )}
    {...rest}
  />
);

const CompoundPageHeader = Object.assign(PageHeader, {
  Content: PageHeaderContent,
  Title: PageHeaderTitle,
  Description: PageHeaderDescription,
  Actions: PageHeaderActions,
});

export type { PageHeaderProps };
export { CompoundPageHeader as PageHeader };

Server component. No 'use client' — page title layout compound; forwards props only.

PageHeader is the title block at the top of any dashboard or settings page. It pairs a title and description with an actions slot for primary controls.

Anatomy


          <PageHeader>
  <PageHeader.Content>
    <PageHeader.Title>{title}</PageHeader.Title>
    <PageHeader.Description>{description}</PageHeader.Description>
  </PageHeader.Content>
  <PageHeader.Actions>{actions}</PageHeader.Actions>
</PageHeader>

API Reference

PageHeader

Extends the div element.

Prop	Default	Type	Description
`asChild`	`false`	`boolean`	Render as the provided child element. Use to swap the default `<div>` for a semantic `<header>` landmark.

asChild

PageHeader sits at the top of a page section, so consumers often want it to render as a <header> landmark rather than a plain <div>. Pass asChild to swap the rendered element while keeping the layout and styling intact.


          <PageHeader asChild>
  <header>
    <PageHeader.Content>
      <PageHeader.Title>{title}</PageHeader.Title>
      <PageHeader.Description>{description}</PageHeader.Description>
    </PageHeader.Content>
    <PageHeader.Actions>{actions}</PageHeader.Actions>
  </header>
</PageHeader>

PageHeader.Content

Extends the div element.

PageHeader.Title

Extends the h1 element.

PageHeader.Description

Extends the p element.

PageHeader.Actions

Extends the div element.

Examples

Default

Projects

Manage all the projects across your workspace.

import { Plus } from '@untitledui-pro/icons/solid';

import { Button } from '@/components/button';
import { PageHeader } from '@/components/page-header';

export default function PageHeaderPreview() {
  return (
    <PageHeader>
      <PageHeader.Content>
        <PageHeader.Title>Projects</PageHeader.Title>
        <PageHeader.Description>
          Manage all the projects across your workspace.
        </PageHeader.Description>
      </PageHeader.Content>
      <PageHeader.Actions>
        <Button variant="outline">Filter</Button>
        <Button>
          <Plus />
          New project
        </Button>
      </PageHeader.Actions>
    </PageHeader>
  );
}

OTP Input

Pagination