Page Header
A page-level header with title and optional description.
Installation
$
Usage
import { PageHeader } from "@/components/ui/page-header"Examples
Default
Dashboard
Overview of your workspace
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | - | The page title, rendered as an h1. |
| description | string | - | Optional supporting text rendered below the title. |
import { cn } from "@/registry/lib/utils"
interface PageHeaderProps extends React.ComponentProps<"div"> {
title: string
description?: string
}
export function PageHeader({ title, description, className, ...props }: PageHeaderProps) {
return (
<div data-slot="page-header" className={cn("mb-6", className)} {...props}>
<h1 className="text-2xl leading-snug font-medium break-words">{title}</h1>
{description && (
<p className="text-sm leading-normal text-muted-foreground mt-1 break-words">{description}</p>
)}
</div>
)
}