Page

Layout component for creating consistent page structures.

Purpose

The Page component provides a consistent layout structure with a title and content area.

Key Features

• Consistent page header styling
• Flexible content area
• Optional panel styling
• Responsive layout
• Tailwind CSS integration

Basic Usage

import { Page } from '@cratis/components/Common';

function MyPage() {
    return (
        <Page title="My Page">
            <div>Page content goes here</div>
        </Page>
    );
}

Showing the Title

By default the title is not rendered. Pass showTitle to opt in:

<Page title="My Page" showTitle>
    <div>Page content goes here</div>
</Page>

With Panel Styling

<Page title="Dashboard" panel>
    <div>Content with panel background</div>
</Page>

Props

• title: Page title string (always required, used e.g. for accessibility or document title even when not visible)
• showTitle: Render the title as a visible heading (default: false)
• panel: Apply panel styling to content area (default: false)
• children: Page content
• All standard HTML div attributes (className, style, etc.)

Layout

The Page component uses Flexbox for layout:

• Full height container
• Large heading (h1) at the top
• Flexible content area that fills remaining space
• Overflow handling for scrollable content

Examples

Simple Page

<Page title="Users">
    <UserList />
</Page>

Page with Multiple Sections

<Page title="Dashboard" panel>
    <div className="grid grid-cols-3 gap-4">
        <StatCard title="Users" value={totalUsers} />
        <StatCard title="Orders" value={totalOrders} />
        <StatCard title="Revenue" value={totalRevenue} />
    </div>

    <div className="mt-4">
        <RecentActivity />
    </div>
</Page>

Page with Custom Styling

<Page
    title="Reports"
    className="custom-page"
    style={{ backgroundColor: '#f5f5f5' }}
>
    <ReportViewer />
</Page>

Integration

Works with:

• Tailwind CSS for styling
• React Router for navigation
• Any content components