PageLayout
A responsive page wrapper that combines content width constraints with viewport-adaptive padding.
Loading...
PageLayout
Installation
pnpm add @corew500/uiUsage
import { PageLayout } from "@corew500/ui/page-layout"
<PageLayout>
<Stack spacing={8}>
<Heading level={1}>Page Title</Heading>
<Text>Page content goes here.</Text>
</Stack>
</PageLayout>Max Width
Control the maximum content width. Default is 4xl (896px).
Loading...
Width Variants
// Narrow - ideal for articles
<PageLayout maxWidth="xl">{/* 576px */}</PageLayout>
// Medium - ideal for forms
<PageLayout maxWidth="2xl">{/* 672px */}</PageLayout>
// Wide - ideal for dashboards
<PageLayout maxWidth="4xl">{/* 896px */}</PageLayout>
// Full width - no constraint
<PageLayout maxWidth="full">{/* 100% */}</PageLayout>Centered Content
Use centered for login pages, error pages, and centered forms.
Loading...
Centered Layout
<PageLayout maxWidth="md" centered>
<Card>
<LoginForm />
</Card>
</PageLayout>Responsive Padding
Padding automatically scales with viewport size:
| Prop | Mobile | Tablet (md) | Desktop (lg) |
|------|--------|-------------|--------------|
| paddingY="sm" | py-4 | py-6 | py-6 |
| paddingY="md" | py-6 | py-8 | py-10 |
| paddingY="lg" | py-8 | py-12 | py-16 |
| paddingY="xl" | py-12 | py-16 | py-20 |
| paddingX="sm" | px-4 | px-4 | px-4 |
| paddingX="md" | px-4 | px-6 | px-6 |
| paddingX="lg" | px-4 | px-6 | px-8 |
Common Patterns
Standard Page
<PageLayout>
<Stack spacing={8}>
<Heading level={1}>Dashboard</Heading>
<BentoGrid columns={3}>
<Card>Widget 1</Card>
<Card>Widget 2</Card>
<Card>Widget 3</Card>
</BentoGrid>
</Stack>
</PageLayout>Article Layout
<PageLayout maxWidth="2xl" paddingY="md">
<article>
<Stack spacing={6}>
<Heading level={1}>Article Title</Heading>
<Text variant="lead">Introduction paragraph...</Text>
<div className="prose">{content}</div>
</Stack>
</article>
</PageLayout>Hero + Content
<>
{/* Full-width hero */}
<PageLayout maxWidth="full" paddingX="none" paddingY="xl">
<HeroSection />
</PageLayout>
{/* Constrained content below */}
<PageLayout>
<Stack spacing={12}>
<FeaturesSection />
<TestimonialsSection />
</Stack>
</PageLayout>
</>Form Page
<PageLayout maxWidth="lg" centered>
<Card>
<CardHeader>
<CardTitle>Create Account</CardTitle>
</CardHeader>
<CardContent>
<Stack spacing={4}>
<Input label="Email" type="email" />
<Input label="Password" type="password" />
<Button>Sign Up</Button>
</Stack>
</CardContent>
</Card>
</PageLayout>With AppLayout
For dashboard pages, use AppLayout for the sidebar/header, then PageLayout for the main content area:
<AppLayout sidebar={<Sidebar />}>
<PageLayout maxWidth="4xl" paddingY="md">
<Stack spacing={6}>
<Heading level={1}>Dashboard</Heading>
<DashboardContent />
</Stack>
</PageLayout>
</AppLayout>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| maxWidth | enum | 4xl | Maximum width constraint for the content. - `md`: 28rem (448px) - narrow content - `lg`: 32rem (512px) - forms, dialogs - `xl`: 36rem (576px) - articles - `2xl`: 42rem (672px) - wide articles - `3xl`: 48rem (768px) - content pages - `4xl`: 56rem (896px) - dashboards - `full`: No max-width constraint |
| paddingY | enum | "lg" | Vertical padding that scales with viewport. - `none`: No vertical padding - `sm`: Minimal padding (py-4 → py-6) - `md`: Moderate padding (py-6 → py-10) - `lg`: Comfortable padding (py-8 → py-16) - `xl`: Spacious padding (py-12 → py-20) |
| paddingX | enum | "lg" | Horizontal padding that scales with viewport. - `none`: No horizontal padding (for full-bleed content) - `sm`: Fixed small padding (px-4) - `md`: Responsive padding (px-4 → px-6) - `lg`: Responsive padding (px-4 → px-8) |
| centered | enum | false | Whether to center content both vertically and horizontally. Useful for login pages, error pages, and centered forms. |
Accessibility
Additional
- - PageLayout is a purely visual layout component with no semantic meaning
- Wrap content in appropriate semantic elements (main, section, article)
- For the primary page content, use `<main>` inside PageLayout
Localization
Translatable Content
- - PageLayout has no text content and requires no localization
RTL Support
- Layout adapts correctly for both LTR and RTL languages