Container is a layout component that provides consistent horizontal padding and maximum width constraints for content. It’s commonly used to center content and maintain readable line lengths.
import { Container } from 'reshaped';
Basic Usage
<Container>
<View padding={4} backgroundColor="neutral-faded">
Content is centered with horizontal padding
</View>
</Container>
Custom Padding
<Container padding={8}>
<View backgroundColor="neutral-faded">
Content with larger horizontal padding
</View>
</Container>
Responsive Padding
<Container padding={{ s: 4, m: 6, l: 8 }}>
<View backgroundColor="neutral-faded">
Padding increases on larger viewports
</View>
</Container>
Width Control
<Container width="800px">
<View backgroundColor="neutral-faded">
Content with custom max width
</View>
</Container>
Vertical Alignment
<Container height="100vh" align="center" justify="center">
<View padding={4} backgroundColor="neutral-faded">
Centered vertically and horizontally
</View>
</Container>
Node for inserting children
padding
Responsive<number>
default:"4"
Component inline padding (horizontal), base unit token number multiplier
width
Responsive<string | number>
Component width, literal css value or unit token multiplier
height
Responsive<string | number>
Component height, literal css value or unit token multiplier
maxHeight
Responsive<string | number>
Component max height, literal css value or unit token multiplier
align
Responsive<'start' | 'center' | 'end' | 'stretch' | 'baseline'>
Vertical alignment of children
justify
Responsive<'start' | 'center' | 'end' | 'space-between' | 'space-around'>
Horizontal alignment of children
Additional classname for the root element
attributes
React.HTMLAttributes<HTMLDivElement>
Additional attributes for the root element
Container automatically sets maxWidth="100%" to prevent overflow.
The default padding value of 4 provides consistent spacing across most layouts. Adjust based on your design needs.