Page Container

Docs

Page Container

A container component that provides consistent max-width and padding based on size variants.

This is a page container with small size (768px max-width)

This is a page container with default size (1200px max-width)

This is a page container with large size (1600px max-width)

This is a page container with full size (no max-width)

import { PageContainer } from 'ui-patterns/PageContainer'
 
export function PageContainerDemo() {
  return (
    <div className="w-full space-y-4">
      <PageContainer size="small" className="bg-muted border rounded-lg p-4">
        <p>This is a page container with small size (768px max-width)</p>
      </PageContainer>
      <PageContainer size="default" className="bg-muted border rounded-lg p-4">
        <p>This is a page container with default size (1200px max-width)</p>
      </PageContainer>
      <PageContainer size="large" className="bg-muted border rounded-lg p-4">
        <p>This is a page container with large size (1600px max-width)</p>
      </PageContainer>
      <PageContainer size="full" className="bg-muted border rounded-lg p-4">
        <p>This is a page container with full size (no max-width)</p>
      </PageContainer>
    </div>
  )
}

Usage

import { PageContainer } from 'ui-patterns/PageContainer'

<PageContainer size="default">{/* Page content */}</PageContainer>

Size Variants

The PageContainer supports four size variants:

small - max-width: 768px
default - max-width: 1200px
large - max-width: 1600px
full - no max-width constraint

PreviousModal

NextPage Header