Page Layout

Page content layout with header and sections

Basic Usage

This is a demo of the PageLayout component with responsive padding.

Getting Started

PageLayout provides consistent page structure with responsive padding.

The content is automatically constrained to a readable width and padding scales based on viewport size.

pnpm add @corew500/ui

import { PageLayout } from "@corew500/ui/page-layout"

<PageLayout>Content</PageLayout>

Best for articles, blog posts, and long-form content where readability is important. Max width of 576px.

Great for forms, settings pages, and focused content areas. Max width of 672px.

Ideal for dashboards, data tables, and content-rich pages. Max width of 896px.

No max-width constraint. Use for hero sections or full-bleed content.

Enter your credentials to access your account.

Password

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.