PageLayout
A full-width application layout shell with a header area, optional sidebar trigger/aside, right‑side actions, and a content area. Ideal for dashboards and app pages.
PageLayout
PageLayout provides a consistent, full‑bleed app shell with a page header and a content region. Use it to standardize titles, sub‑titles, actions, and optional sidebars across pages.
The header accepts an icon name, a title, and optional belowTitle and rightAside. You can also provide an optional sidebar with a trigger (mobile) and an aside area.
Props
Prop
Type
Examples
Default
Dashboard
Overview of your account
<PageLayout
header={{
icon: 'BarChart',
title: 'Dashboard',
belowTitle: <p className="text-muted-foreground">Overview of your account</p>,
}}
>
<ExampleContent />
</PageLayout>With sidebar (mobile trigger + aside)
Customers
Manage your customer data
<PageLayout
header={{
icon: 'People',
title: 'Customers',
belowTitle: <p className="text-muted-foreground">Manage your customer data</p>,
}}
sidebar={{
trigger: (
<Button size="icon" variant="ghost">
<Menu className="h-5 w-5" />
</Button>
),
aside: (
<div className="flex flex-col gap-4">
<Button variant="ghost">All Customers</Button>
<Button variant="ghost">Active Customers</Button>
<Button variant="ghost">Inactive Customers</Button>
</div>
),
}}
>
<ExampleContent />
</PageLayout>Loading state
Loading
<PageLayout
header={{ icon: 'LoaderCircle', title: 'Loading' }}
loading
/>With right‑side actions
Promotions
Create and manage campaigns
<PageLayout
header={{
icon: 'Campaign',
title: 'Promotions',
belowTitle: (
<p className="text-muted-foreground">Create and manage campaigns</p>
),
rightAside: (
<div className="flex items-center gap-2">
<Button variant="outline">Export</Button>
<Button>Create new</Button>
</div>
),
}}
>
<ExampleContent />
</PageLayout>Best practices
- Use belowTitle for concise, context‑setting descriptions. Keep it to a single sentence where possible.
- Prefer simple, high‑value actions in rightAside (e.g., “Create”, “Export”) and move secondary actions into menus.
- If you need a navigation element, use the sidebar mobile trigger and aside area for a lightweight, page‑scoped nav.
- Use the loading state to avoid layout shift while fetching page data.