Skip to main content

​
Overview

The Container component provides consistent content width, padding, and centering across your application. It’s the foundation for page layouts and helps maintain readable line lengths.

​
Basic Usage

import { Container } from '@yourproject/components';

function Example() {
  return (
    <Container>
      <h1>Page Title</h1>
      <p>Content goes here with consistent padding and max-width.</p>
    </Container>
  );
}

​
Sizes

Containers come in multiple sizes to accommodate different content needs: 
<Container size="sm">
  Narrow container, ideal for focused content like articles (max-width: 640px)
</Container>
The default size is lg if not specified.

​
Padding

Control the horizontal padding of the container: 
<Container padding="none">
  No padding
</Container>

<Container padding="sm">
  Small padding
</Container>

<Container padding="md">
  Medium padding (default)
</Container>

<Container padding="lg">
  Large padding
</Container>

​
Centering

By default, containers are centered. You can disable this: 
<Container centered={false}>
  This container is not centered (aligned to left)
</Container>

​
Fluid Container

Create a container that maintains padding but has no max-width: 
<Container fluid>
  Full width container with padding
</Container>

​
Props

​
size
string
default:"lg"
Container max-width: sm (640px), md (768px), lg (1024px), xl (1280px), or full
​
padding
string
default:"md"
Horizontal padding: none, sm, md, or lg
​
centered
boolean
default:"true"
Whether to center the container horizontally
​
fluid
boolean
default:"false"
If true, removes max-width while keeping padding
​
children
ReactNode
required
The content to display inside the container
​
className
string
Additional CSS class names to apply
​
as
string
default:"'div'"
HTML element to render: div, main, section, article, etc.

​
TypeScript Interface

interface ContainerProps {
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
  padding?: 'none' | 'sm' | 'md' | 'lg';
  centered?: boolean;
  fluid?: boolean;
  children: React.ReactNode;
  className?: string;
  as?: keyof JSX.IntrinsicElements;
}

​
Layout Examples

​
Basic Page Layout

import { Container } from '@yourproject/components';

function Page() {
  return (
    <Container as="main">
      <h1>Welcome</h1>
      <p>This is a standard page with centered content.</p>
    </Container>
  );
}

​
Article Layout

import { Container } from '@yourproject/components';

function Article() {
  return (
    <Container size="sm" as="article">
      <h1>Article Title</h1>
      <p>The narrow container width improves readability for long-form content.</p>
      <p>Optimal line length is around 60-70 characters per line.</p>
    </Container>
  );
}

​
Dashboard Layout

import { Container, Grid, Card } from '@yourproject/components';

function Dashboard() {
  return (
    <Container size="xl">
      <h1>Dashboard</h1>
      <Grid cols={3} gap="lg">
        <Card>Widget 1</Card>
        <Card>Widget 2</Card>
        <Card>Widget 3</Card>
      </Grid>
    </Container>
  );
}

​
Nested Containers

import { Container } from '@yourproject/components';

function Page() {
  return (
    <>
      {/* Full-width hero section */}
      <div style={{ background: '#f5f5f5' }}>
        <Container size="xl">
          <h1>Hero Section</h1>
        </Container>
      </div>
      
      {/* Standard content */}
      <Container size="md">
        <p>Main content with comfortable reading width.</p>
      </Container>
      
      {/* Wide content section */}
      <Container size="xl">
        <Grid cols={3}>
          <Card>Feature 1</Card>
          <Card>Feature 2</Card>
          <Card>Feature 3</Card>
        </Grid>
      </Container>
    </>
  );
}

​
Full Width Section with Padded Content

import { Container } from '@yourproject/components';

function Page() {
  return (
    <div style={{ background: '#f0f0f0' }}>
      <Container fluid padding="lg">
        {/* Full width but with consistent padding */}
        <img 
          src="banner.jpg" 
          alt="Banner" 
          style={{ width: '100%' }} 
        />
      </Container>
    </div>
  );
}

​
Responsive Behavior

Containers automatically adjust their padding on smaller screens:
  • Desktop: Full padding as specified
  • Tablet: Slightly reduced padding
  • Mobile: Minimal padding to maximize screen space
<Container size="lg">
  {/* 
    Automatically adapts:
    - Desktop: max-width 1024px with large padding
    - Tablet: max-width 768px with medium padding  
    - Mobile: full width with small padding
  */}
</Container>
Use smaller container sizes (sm or md) for content-focused pages like blog posts and documentation to improve readability.
Use larger container sizes (xl or full) for application interfaces and dashboards that need more horizontal space.

​
Best Practices

  1. Choose the right size: Use sm for articles, md for standard pages, lg for applications, and xl for dashboards
  2. Consistent usage: Use the same container size throughout similar pages for visual consistency
  3. Nested sections: Wrap full-width colored sections around containers for visual variety: 
    <section style={{ background: '#f5f5f5' }}>
  <Container>
    Content here
  </Container>
</section>
  4. Semantic HTML: Use the as prop to render semantic elements (main, article, section) for better accessibility

​
Accessibility

  • Uses semantic HTML elements when specified with as prop
  • Maintains proper document structure
  • Ensures content remains accessible and readable at all viewport sizes
  • Provides consistent spacing for better visual hierarchy

Build docs developers (and LLMs) love

Get started for freeTalk to us