PageLayout

Standard page with optional sidebar.

layoutpagesidebar

Import

import { PageLayout } from "@/components/ui";

Basic Usage

PageLayout Preview

Main Content

PageLayout provides a standard page structure with an optional sidebar.

Code

tsx

<PageLayout>
  <Container>
    <h1>Page Title</h1>
    <p>Page content goes here</p>
  </Container>
</PageLayout>

With Sidebar

Add sidebar navigation

1<PageLayout
2  sidebar={
3    <nav className="space-y-1 p-4">
4      <NavLink href="/docs/intro">Introduction</NavLink>
5      <NavLink href="/docs/installation">Installation</NavLink>
6      <NavLink href="/docs/components">Components</NavLink>
7    </nav>
8  }
9  sidebarWidth={280}
10>
11  <Container>
12    <h1>Documentation</h1>
13    <p>Content here...</p>
14  </Container>
15</PageLayout>

Collapsible Sidebar

Allow sidebar to collapse

1<PageLayout
2  sidebar={<Sidebar />}
3  sidebarPosition="left"
4  collapsible
5>
6  {children}
7</PageLayout>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring