Container

Center and constrain your page content.

Overview

The Container component is a simple wrapper that centers its children and provides a maximum width. It ensures that your content doesn't stretch too wide on large screens, maintaining readability and a clean layout.

Usage

import { Container } from '@/components/layout/container';

export function MyPage() {
  return (
    <Container>
      <h1>Welcome to my page</h1>
      <p>This content will be centered and constrained.</p>
    </Container>
  );
}

Props

Prop	Type	Description
size	'sm' | 'md' | 'lg' | 'xl' | 'full'	The maximum width of the container.
className	string	Additional Tailwind CSS classes.

Best Practices

• ✅ Do this: Use the Container component for all main page content.
• ✅ Do this: Choose a size that matches the amount and type of content on your page.
• ❌ Don't do this: Nest containers within each other unless absolutely necessary.