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.
MaxWidthWrapper
A responsive container that constrains content width and applies consistent horizontal padding. Ideal for page layouts and readable content width.
VisuallyHidden
Hide content visually while keeping it accessible to assistive technologies. Useful for labels, extra context, and accessible names.