Container
A responsive container component that centers content and constrains its maximum width. Essential for creating consistent page layouts.
Sizes
Small Container (max-w-2xl)
Medium Container (max-w-4xl)
Large Container (max-w-6xl) - Default
Extra Large Container (max-w-7xl)
Full Width Container
Padding
No Padding
Small Padding (16px)
Semantic HTML
Page Content
Using semantic main element
Props
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | Maximum width of the container |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Horizontal padding of the container |
as | 'div' | 'section' | 'article' | 'main' | 'div' | HTML element to render |
className | string | - | Additional CSS classes |
children* | React.ReactNode | - | Container content |
Usage Guidelines
When to use
- •For main page content to prevent text lines from becoming too long
- •To create consistent margins across different pages
- •To center content horizontally on the page
Best practices
- •Use 'lg' size for most page content
- •Use 'sm' or 'md' for focused content like forms or articles
- •Use 'full' when you need edge-to-edge layouts
- •Combine with semantic HTML elements (main, section, article)
- •Nest containers carefully - usually only one level needed
Accessibility
- •Use semantic 'as' prop for proper document structure
- •Ensure sufficient padding for touch targets on mobile
- •Content remains readable at all viewport sizes
Do's and Don'ts
✓ Do
- •Use consistent container sizes across similar page types
- •Choose container size based on content type and reading comfort
- •Use semantic HTML with the 'as' prop for better document structure
- •Combine with Stack component for consistent internal spacing
Article Title
Content with optimal line length for readability.
✗ Don't
- •Don't nest multiple containers unnecessarily
- •Don't use 'sm' container for wide content like data tables
- •Don't override container max-width without good reason
- •Don't use 'full' size by default - reserve for special layouts
Content
Related Components
Stack
For flexible layouts inside containers
Grid
For multi-column layouts
Section
For semantic page sections