How to Use
PageTitle
PageTitle renders a styled heading for pages and sections. Use it at the top of each page for the main heading, or as section headers within a page. The as prop controls the heading level (h1, h2, h3, etc.), and the color prop applies an accent color. An optional icon prop places a visual element before the title text. PageTitle provides consistent styling across your app through a single component.
Page Headers
Use PageTitle at the top of each page as an h1 (default). The title prop is the only required prop. The color prop sets the accent color — use primary as the default for most pages, and other colors for specialized pages (danger for error pages, success for success pages, warning for warning pages). Use the as prop to render as h2 or h3 for section headers within a page.
<PageTitle title="Dashboard" />
<PageTitle title="User Profile" color="primary" />
<PageTitle title="Settings" as="h2" color="secondary" />
<PageTitle title="Billing" as="h3" color="info" />With Icon
The icon prop adds a visual element before the title. Use inline SVGs, emoji, or icon components. The icon inherits the title's color and size. This is useful for distinguishing pages visually — a shopping cart icon on the Orders page, a user icon on the Profile page, etc.
<PageTitle title="Notifications" icon={<span>🔔</span>} color="warning" />
<PageTitle title="Analytics" icon={<span>📊</span>} color="info" />
<PageTitle title="Users" icon={<span>👤</span>} color="primary" />Props Reference
All available props for PageTitle. See the full API reference page for interactive playground examples.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Heading text content. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h1" | HTML heading element. |
| color | "default" | "primary" | "info" | "success" | "warning" | "danger" | "secondary" | "default" | Heading color. |
| icon | ReactNode | — | Leading icon. |
| iconPosition | "start" | "end" | "start" | Icon position relative to title. |
| tooltip | boolean | TooltipProps | — | Show an info tooltip. |
| classNames | { base?: string; title?: string; icon?: string } | — | Slot class overrides. |
Best Practices
- ◆Use as="h1" for main page titles (one per page), as="h2" for section headers, as="h3" for subsection headers
- ◆The color prop sets an accent gradient on the title — use primary for default, semantic colors for contextual pages
- ◆Icons should be inline SVG or span elements sized to match the heading font size
- ◆PageTitle is a visual-only component — it does not manage document.title or SEO metadata; use Next.js metadata API for that