The Container component centers your content horizontally and constrains the maximum width. It’s the most basic layout element and is responsive to different screen sizes.
Installation
npm install @naturacosmeticos/natds-web
Import
import { Container } from '@naturacosmeticos/natds-web';
Usage
Basic Container
A simple container that centers content with responsive max-width:
import { Container, Typography } from '@naturacosmeticos/natds-web';
function App() {
return (
<Container>
<Typography>This content is centered and constrained</Typography>
</Container>
);
}
Fluid Container with Max Width
Set a maximum width for the container using the maxWidth prop:
import { Container } from '@naturacosmeticos/natds-web';
function SmallContainer() {
return (
<Container maxWidth="sm">
<p>This container has a maximum width of 'sm' (600px)</p>
</Container>
);
}
Fixed Width Container
For a fixed-width container that matches breakpoint widths:
import { Container } from '@naturacosmeticos/natds-web';
function FixedContainer() {
return (
<Container fixed>
<p>This container uses fixed widths at each breakpoint</p>
</Container>
);
}
Disable Gutters
Remove the default horizontal padding:
import { Container } from '@naturacosmeticos/natds-web';
function NoGutters() {
return (
<Container disableGutters>
<p>This container has no horizontal padding</p>
</Container>
);
}
Props
The Container component extends Material-UI’s ContainerProps and accepts all standard props.
maxWidth
'xs' | 'sm' | 'md' | 'lg' | 'xl' | false
default:"'lg'"
Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth.
xs: 444pxsm: 600pxmd: 960pxlg: 1280pxxl: 1920px
Set the max-width to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of sizes instead of a fully fluid viewport.
If true, the left and right padding is removed.
component
React.ElementType
default:"'div'"
The component used for the root node. Either a string to use a HTML element or a component.
The content of the container.
CSS class name to apply to the container.
Inline styles to apply to the container.
Responsive Behavior
The Container component is fully responsive and adjusts its width based on the screen size:
| Breakpoint | Size | Container Width (lg) |
|---|
| xs | <600px | 100% (with padding) |
| sm | ≥600px | 600px |
| md | ≥960px | 960px |
| lg | ≥1280px | 1280px |
| xl | ≥1920px | 1920px |
Examples
Nested Containers
While containers can be nested, most layouts don’t require a nested container:
import { Container, Typography } from '@naturacosmeticos/natds-web';
function NestedContainers() {
return (
<Container maxWidth="lg">
<Typography variant="h1">Outer Container</Typography>
<Container maxWidth="sm">
<Typography>Inner Container (rarely needed)</Typography>
</Container>
</Container>
);
}
Container with Custom Component
Render the container as a different HTML element:
import { Container } from '@naturacosmeticos/natds-web';
function SectionContainer() {
return (
<Container component="section" maxWidth="md">
<h2>This is a semantic section element</h2>
<p>Content goes here</p>
</Container>
);
}
Full Width Container
Disable the max-width constraint:
import { Container } from '@naturacosmeticos/natds-web';
function FullWidth() {
return (
<Container maxWidth={false}>
<p>This container takes the full width of its parent</p>
</Container>
);
}
Best Practices
Use Container as the top-level layout component for page content
Choose the appropriate maxWidth based on your content density
Use disableGutters when you need edge-to-edge content
Avoid deeply nesting containers - one level is usually sufficient
Don’t use Container for components that should span full width
Accessibility
The Container component:
- Uses semantic HTML (default
<div>, customizable with component prop)
- Maintains proper document structure
- Preserves content flow for screen readers
- Supports custom ARIA attributes through props
Related Components
- Grid - For responsive grid layouts within containers
- Spacing - For managing spacing around content
- Box - For low-level layout utilities
