The Page component provides a complete page layout structure with automatic container sizing, responsive padding, and consistent spacing. It combines container functionality with page-specific styling and can optionally include a PageHeader for titles and actions. The Page component is designed to be the top-level layout component for your application pages.

Description

A layout component that wraps page content with consistent container sizing, padding, and spacing.

Usage

import { Page } from "@crafted-ui/react";

<Page title="My Page" subtitle="Page description">
  <Section title="Content Section">
    <p>Page content goes here</p>
  </Section>
</Page>

Props

The Page component accepts the following props:

Prop	Type	Description
title	string	Optional page title that renders a PageHeader
subtitle	string	Optional subtitle for the page header
className	string	Additional CSS class names for the content container
children	ReactNode	Content of the page

The component also accepts all standard HTML div attributes for the content container.

Description

A header component specifically designed for page titles with optional actions and responsive layout.

Usage

import { PageHeader } from "@crafted-ui/react";

<PageHeader 
  title="Page Title" 
  subtitle="Page description"
>
  <Button>Action</Button>
</PageHeader>

Props

The PageHeader component accepts the following props:

Prop	Type	Description
title	string	Header title text
subtitle	string	Optional subtitle text
className	string	Additional CSS class names for the heading
wrapperClassName	string	Additional CSS class names for the header container
children	ReactNode	Optional content (like buttons) to display alongside the header

The component also accepts all standard HTML header attributes.

Container Behavior

The Page component applies consistent container sizing and responsive padding:

• Container width: max-w-container mx-auto (centers content with maximum width)
• Responsive padding: px-4 py-6 sm:px-6 lg:px-8 lg:py-8
• Content spacing: space-y-12 for vertical spacing between child elements

<Page title="Layout Demo" subtitle="Shows container and spacing behavior">
  <div>Container content with automatic width constraints</div>
  <div>Automatic spacing between content blocks</div>
</Page>

Header Layout

When a title is provided, PageHeader automatically handles responsive layout:

• Mobile: Title and actions stack vertically
• Desktop: Title and actions are side-by-side with md:flex md:items-center md:justify-between

<PageHeader title="Page with Actions" subtitle="Responsive header layout">
  <div className="flex gap-2">
    <Button>Edit</Button>
    <Button variant="primary">Save</Button>
  </div>
</PageHeader>

Complete Page Layout

Using Page for a full page structure:

<Page title="Dashboard" subtitle="Overview of your account">
  <Section title="Quick Stats">
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {/* Metric cards */}
    </div>
  </Section>
  
  <Section title="Recent Activity">
    {/* Activity list */}
  </Section>
</Page>

Page with Header Actions

Including action buttons in the page header:

<Page title="User Settings" subtitle="Manage your account preferences">
  <PageHeader title="User Settings" subtitle="Manage your account preferences">
    <Button variant="primary">Save Changes</Button>
  </PageHeader>
  
  <Section title="Profile Information">
    {/* Form content */}
  </Section>
</Page>

Standalone PageHeader

Using PageHeader independently for custom layouts:

<div className="min-h-screen bg-background">
  <PageHeader 
    title="Custom Layout" 
    subtitle="Using PageHeader independently"
    wrapperClassName="bg-muted px-4 py-6"
  >
    <Button>Custom Action</Button>
  </PageHeader>
  
  <main className="px-4 py-8">
    {/* Custom content layout */}
  </main>
</div>

Breakpoint Behavior

Page components adapt to different screen sizes:

• Mobile (< 640px): px-4 py-6 padding
• Small (≥ 640px): px-6 horizontal padding
• Large (≥ 1024px): px-8 py-8 increased padding

Header Responsiveness

PageHeader layout changes based on screen size:

• Mobile: Title and actions stack vertically
• Medium and up: Horizontal layout with title on left, actions on right

Container Width

The max-w-container class provides:

• Maximum width constraint (defined in your Tailwind config)
• Automatic horizontal centering with mx-auto
• Responsive behavior at different breakpoints

The Page components follow semantic HTML and accessibility best practices:

• Uses semantic <header> element for PageHeader
• Maintains proper heading hierarchy (h1 for page titles)
• Provides logical document structure and content flow
• Ensures adequate spacing for readability

When implementing pages, ensure that:

1. Page titles are descriptive and provide clear context
2. Content is organized logically within sections
3. Interactive elements (buttons, links) have proper focus states
4. Color contrast meets accessibility standards
5. Content remains readable and navigable at all screen sizes

Custom Container Styling

Override default container behavior:

<Page 
  className="max-w-4xl space-y-6" 
  title="Custom Width"
>
  <Section title="Narrower Container">
    <p>Content with custom maximum width</p>
  </Section>
</Page>

Custom Header Styling

Apply custom styling to PageHeader:

<PageHeader 
  title="Styled Header" 
  subtitle="Custom appearance"
  wrapperClassName="bg-gradient-to-r from-primary to-accent p-8 rounded-lg"
  className="text-white"
>
  <Button variant="secondary">Action</Button>
</PageHeader>

Full-Width Sections

Combine Page with full-width elements:

<Page title="Mixed Layout">
  <Section title="Regular Content">
    <p>Standard container width</p>
  </Section>
</Page>

<div className="bg-muted py-12">
  <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-8">
    <Section title="Full-Width Section">
      <p>Full-width background with contained content</p>
    </Section>
  </div>
</div>

Page Structure

• Use Page as the top-level layout component for application pages
• Include descriptive titles and subtitles for better user orientation
• Organize content using Section components within the Page
• Place primary actions in the PageHeader for easy access

Content Organization

• Keep related content grouped within sections
• Use consistent spacing by relying on the built-in space-y-12
• Consider the visual hierarchy when structuring page content
• Ensure logical flow from page title through content sections

Performance Considerations

• Page components are lightweight wrappers with minimal performance impact
• Container constraints prevent content from becoming too wide on large screens
• Responsive padding reduces layout shift across different devices
• Use Page consistently across your application for predictable layouts

Layout Patterns

• Combine Page with Section components for structured content
• Use PageHeader actions for page-level functionality
• Consider mobile-first responsive design when planning page layouts
• Maintain consistent spacing and sizing across different page types