Container
Container is Layr's most versatile layout component, mirroring Flutter's Container widget. It provides a declarative API for styling, sizing, positioning, and decorating content with comprehensive control over padding, margin, borders, shadows, gradients, and transformations.
import { Container } from '@dynshift/layr';
<Container padding={24} color="#eb1660">
<span>Hello World</span>
</Container>
NOTE: Previews are not depiction of actual website output.
<Container
width={300}
height={200}
color="#3b82f6"
>
<span>Blue Box</span>
</Container>
NOTE: Previews are not depiction of actual website output.
1b. With Padding and Margin
<Container
padding={32}
margin={16}
color="#333333"
>
Content with spacing
</Container>
NOTE: Previews are not depiction of actual website output.
Container accepts both numeric (pixels) and string (CSS) values for sizing.
<Container color='grey' width={400} height={300}>
400px × 300px
</Container>
NOTE: Previews are not depiction of actual website output.
2b. Responsive Dimensions
<Container color='grey' width="100%" height="50vh">
Full width, half viewport height
</Container>
NOTE: Previews are not depiction of actual website output.
<Container color='grey' width="20rem" height="auto">
20rem wide, auto height
</Container>
NOTE: Previews are not depiction of actual website output.
Container supports multiple padding syntaxes for maximum flexibility.
{}
<Container color='grey' padding={24}>
24px padding on all sides
</Container>
<Container height={20}/>
{}
<Container color='grey' padding={{ all: 24 }}>
Equivalent
</Container>
NOTE: Previews are not depiction of actual website output.
3b. Horizontal & Vertical Padding
<Container color='grey' padding={{ horizontal: 32, vertical: 16 }}>
32px left/right, 16px top/bottom
</Container>
NOTE: Previews are not depiction of actual website output.
<Container color='grey' padding={{ top: 10, right: 20, bottom: 10, left: 20 }}>
Custom padding per side
</Container>
NOTE: Previews are not depiction of actual website output.
<Container
color='grey'
paddingHorizontal={24}
paddingVertical={16}
>
Cleaner syntax
</Container>
<Container height={20}/>
<Container
color='grey'
paddingTop={10}
paddingRight={20}
paddingBottom={10}
paddingLeft={20}
>
Maximum control
</Container>
NOTE: Previews are not depiction of actual website output.
When multiple padding props are used, more specific props override general ones.
<Container
color='grey'
padding={16}
paddingHorizontal={32}
paddingTop={8}
>
Resolves to: top=8px, right=32px, bottom=16px, left=32px
</Container>
NOTE: Previews are not depiction of actual website output.
Margin works identically to padding with the same syntaxes.
<Container color='grey' margin={16}>
16px margin on all sides
</Container>
NOTE: Previews are not depiction of actual website output.
4b. Horizontal & Vertical Margin
<Container color='grey' margin={{ horizontal: 24, vertical: 12 }}>
24px left/right, 12px top/bottom
</Container>
NOTE: Previews are not depiction of actual website output.
<Container color='grey'
marginTop={20}
marginBottom={40}
>
Custom margins
</Container>
NOTE: Previews are not depiction of actual website output.
The decoration prop provides Flutter's powerful BoxDecoration API.
<Container decoration={{ color: '#eb1660' }}>
Background color
</Container>
<Container height={20}/>
<Container color="#eb1660">
Equivalent
</Container>
NOTE: Previews are not depiction of actual website output.
<Container decoration={{
color: '#333',
borderRadius: 12
}}>
12px rounded corners
</Container>
<Container height={20}/>
<Container decoration={{
color: '#333',
borderRadius: '1rem'
}}>
1rem rounded corners
</Container>
NOTE: Previews are not depiction of actual website output.
<Container decoration={{
color: '#333',
borderRadius: 12,
boxShadow: [{
color: 'rgba(255, 255, 255, 0.1)',
offset: { dx: 0, dy: 4 },
blurRadius: 12,
spreadRadius: 0,
}],
}}>
Elevated Container
</Container>
NOTE: Previews are not depiction of actual website output.
<Container decoration={{
color: '#333',
boxShadow: [
{
color: 'rgba(255, 255, 255, 0.1)',
offset: { dx: 0, dy: 5 },
blurRadius: 10,
},
{
color: 'rgba(128, 0, 0, 0.5)',
offset: { dx: 0, dy: 10 },
blurRadius: 20,
},
],
}}>
Layered shadows
</Container>
NOTE: Previews are not depiction of actual website output.
<Container decoration={{
color: '#333',
borderRadius: 8,
border: {
top: { width: 1, color: '#e5e7eb', style: 'solid' },
bottom: { width: 1, color: '#e5e7eb', style: 'solid' },
left: { width: 1, color: '#e5e7eb', style: 'solid' },
right: { width: 1, color: '#e5e7eb', style: 'solid' },
},
}}>
Bordered container
</Container>
NOTE: Previews are not depiction of actual website output.
<Container decoration={{
color: '#333',
borderRadius: 8,
border: BorderAll({ width: 1, color: '#e5e7eb' }),
}}>
Uniform border
</Container>
NOTE: Previews are not depiction of actual website output.
<Container decoration={{
border: {
top: { width: 2, color: '#3b82f6', style: 'dashed' },
bottom: { width: 2, color: '#3b82f6', style: 'dotted' },
},
}}>
Styled borders
</Container>
NOTE: Previews are not depiction of actual website output.
Container supports linear and radial gradients.
<Container decoration={{
gradient: {
type: 'linear',
colors: ['#eb1660', '#ff6b9d'],
begin: 'to right',
},
}}>
Horizontal gradient
</Container>
NOTE: Previews are not depiction of actual website output.
6b. Gradient with Direction
<Container decoration={{
gradient: {
type: 'linear',
colors: ['#3b82f6', '#8b5cf6', '#ec4899'],
begin: '135deg',
},
}}>
Diagonal gradient
</Container>
NOTE: Previews are not depiction of actual website output.
6c. Gradient with Color Stops
<Container decoration={{
gradient: {
type: 'linear',
colors: ['#000000', '#eb1660', '#ffffff'],
stops: [0, 0.5, 1],
begin: 'to bottom',
},
}}>
Controlled color stops
</Container>
NOTE: Previews are not depiction of actual website output.
<Container decoration={{
gradient: {
type: 'radial',
colors: ['#eb1660', '#0d0d0d'],
center: 'circle at center',
},
}}>
Radial gradient
</Container>
NOTE: Previews are not depiction of actual website output.
Display background images with full control over sizing and positioning.
<Container decoration={{
image: {
image: '/eg-bg.jpg',
fit: 'cover',
},
}}>
Content over image
</Container>
NOTE: Previews are not depiction of actual website output.
<Container decoration={{
image: {
image: '/eg-bg.jpg',
fit: 'contain',
alignment: 'top center',
repeat: 'repeat',
opacity: 0.5,
},
}}>
Advanced image control
</Container>
NOTE: Previews are not depiction of actual website output.
Available fit values: 'cover', 'contain', 'fill', 'none', 'scale-down'
Container supports rectangular and circular shapes.
<Container
width={100}
height={100}
alignment="center"
decoration={{
color: '#eb1660',
shape: BoxShape.circle,
}}
>
Perfect circle
</Container>
NOTE: Previews are not depiction of actual website output.
Note: When shape is BoxShape.circle, borderRadius is ignored and the container becomes a perfect circle with border-radius: 50% and aspect-ratio: 1/1.
Apply decoration layers on top of content:
<Container
width={300}
height={200}
decoration={{
image: { image: '/eg-bg.jpg', fit: 'cover' },
}}
foregroundDecoration={{
gradient: {
type: 'linear',
colors: ['rgba(219, 17, 17, 0.6)', 'rgba(51, 201, 126, 0.6)'],
begin: 'to bottom',
},
}}
>
<span style={{ position: 'relative', zIndex: 1, color: 'white' }}>
Text over gradient over image
</span>
</Container>
NOTE: Previews are not depiction of actual website output.
Align children within the container using Flutter's alignment system.
<Container color="#333" width={300} height={200} alignment="center">
<span>Centered</span>
</Container>
NOTE: Previews are not depiction of actual website output.
| Value | Position |
|---|
| topLeft | Top-left corner |
| topCenter | Top-center |
| topRight | Top-right corner |
| centerLeft | Vertically centered, left |
| center | Perfect center |
| centerRight | Vertically centered, right |
| bottomLeft | Bottom-left corner |
| bottomCenter | Bottom-center |
| bottomRight | Bottom-right corner |
10b. Bottom Right Alignment
<Container
width={400}
height={300}
alignment="bottomRight"
color="#0000ff"
>
<span>Bottom-right</span>
</Container>
NOTE: Previews are not depiction of actual website output.
Implementation: Uses CSS Flexbox with appropriate justify-content and align-items values.
Apply min/max width and height constraints:
<Container color="#333" constraints={{
minWidth: 200,
maxWidth: 600,
minHeight: 100,
maxHeight: 400,
}}>
Constrained container
</Container>
NOTE: Previews are not depiction of actual website output.
11a. Responsive Max Width
<Container color="#333" constraints={{ maxWidth: '90vw' }}>
Max 90% of viewport width
</Container>
NOTE: Previews are not depiction of actual website output.
<Container
width={100}
height={100}
alignment="bottomRight"
color="#eb1660"
transform="rotate(45deg)"
>
Rotated
</Container>
NOTE: Previews are not depiction of actual website output.
<Container
width={120}
height={50}
transform="scale(1.5)"
color="#3b82f6"
alignment="center"
>
Scaled up
</Container>
NOTE: Previews are not depiction of actual website output.
<Container
transform="rotate(15deg)"
transformAlignment="topLeft"
color="#10b981"
>
Rotates around top-left corner
</Container>
NOTE: Previews are not depiction of actual website output.
transformAlignment values: Same as alignment prop — determines the transform-origin.
<Container
padding={16}
color="#eb1660"
onClick={() => console.log('Clicked!')}
>
Clickable
</Container>
NOTE: Previews are not depiction of actual website output.
<Container
padding={24}
color="#3b82f6"
cursor="none"
>
No cursor
</Container>
NOTE: Previews are not depiction of actual website output.
Available cursors: pointer, default, text, none
Control how overflowing content is clipped:
<Container
width={200}
height={50}
clipBehavior="hardEdge"
>
<img src="/eg-bg.jpg" alt="Clipped"/>
</Container>
NOTE: Previews are not depiction of actual website output.
Options:
• "none" — No clipping (default)
• "hardEdge" — Clip with overflow: hidden
• "antiAlias" — Clip with overflow: hidden
Layr provides Flutter-style helper functions for cleaner syntax.
<Container color="#eb1660" padding={EdgeInsetsAll(24)}>
24px padding on all sides
</Container>
NOTE: Previews are not depiction of actual website output.
<Container color="#eb1660" padding={EdgeInsetsSymmetric({ horizontal: 32, vertical: 16 })}>
32px horizontal, 16px vertical
</Container>
NOTE: Previews are not depiction of actual website output.
<Container color="#eb1660" padding={EdgeInsetsOnly({ top: 10, left: 20 })}>
Custom padding
</Container>
NOTE: Previews are not depiction of actual website output.
<Container color="#eb1660" decoration={{
border: BorderAll({ width: 2, color: '#3b82f6', style: 'solid' }),
}}>
Uniform border
</Container>
NOTE: Previews are not depiction of actual website output.
15e. BorderRadiusCircular
<Container decoration={{
color: '#eb1660',
borderRadius: BorderRadiusCircular(12),
}}>
Rounded corners
</Container>
NOTE: Previews are not depiction of actual website output.
<Container
width={320}
padding={24}
margin={16}
decoration={{
color: '#333',
borderRadius: 16,
boxShadow: [{
color: 'rgba(0, 0, 0, 0.1)',
offset: { dx: 0, dy: 4 },
blurRadius: 12,
}],
}}
>
<h3>Card Title</h3>
<p>Card content goes here.</p>
</Container>
NOTE: Previews are not depiction of actual website output.
<Container
width={100}
height={50}
alignment="center"
decoration={{
color: '#eb1660',
borderRadius: 10,
}}
cursor="pointer"
onClick={() => console.log('Clicked!')}
>
<span style={{ color: '#ffffff', fontWeight: 600 }}>
Click Me
</span>
</Container>
NOTE: Previews are not depiction of actual website output.
<Container
width="100%"
height="100vh"
decoration={{
image: {
image: '/eg-bg.jpg',
fit: 'cover',
},
gradient: {
type: 'linear',
colors: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.7)'],
begin: 'to bottom',
},
}}
alignment="bottomLeft"
padding={48}
>
<h1 style={{ color: 'white', fontSize: '3rem' }}>
Welcome to Layr
</h1>
</Container>
NOTE: Previews are not depiction of actual website output.
<Container
width={80}
height={80}
decoration={{
image: { image: '/eg-bg.jpg', fit: 'cover' },
shape: BoxShape.circle,
border: BorderAll({ width: 2, color: '#eb1660' }),
}}
/>
NOTE: Previews are not depiction of actual website output.
<Container width={100}>
<Container
paddingHorizontal={12}
paddingVertical={4}
decoration={{
color: 'rgba(235, 22, 96, 0.1)',
borderRadius: 99,
}}
>
<span style={{ color: '#eb1660', fontSize: '0.875rem', fontWeight: 600 }}>
POPULAR
</span>
</Container>
</Container>
NOTE: Previews are not depiction of actual website output.
Container is fully typed with comprehensive IntelliSense support:
import type { ContainerProps, BoxDecoration, EdgeInsets } from '@dynshift/layr';
const decoration: BoxDecoration = {
color: '#eb1660',
borderRadius: 12,
boxShadow: [{
color: 'rgba(0, 0, 0, 0.2)',
offset: { dx: 0, dy: 4 },
blurRadius: 8,
}],
};
const Card: React.FC<ContainerProps> = (props) => {
return (
<Container
padding={24}
decoration={decoration}
{...props}
/>
);
};
| Prop | Type | Description |
|---|
| children | ReactNode | Content to render inside container |
| width | number | string | Container width (px or CSS) |
| height | number | string | Container height (px or CSS) |
| padding | number | EdgeInsets | Padding on all sides or per side |
| paddingHorizontal | number | Horizontal padding (left + right) |
| paddingVertical | number | Vertical padding (top + bottom) |
| paddingTop | number | Top padding |
| paddingBottom | number | Bottom padding |
| paddingLeft | number | Left padding |
| paddingRight | number | Right padding |
| margin | number | EdgeInsets | Margin on all sides or per side |
| marginHorizontal | number | Horizontal margin |
| marginVertical | number | Vertical margin |
| marginTop | number | Top margin |
| marginBottom | number | Bottom margin |
| marginLeft | number | Left margin |
| marginRight | number | Right margin |
| decoration | BoxDecoration | Background decoration |
| foregroundDecoration | BoxDecoration | Foreground decoration layer |
| color | string | Background color (shorthand) |
| alignment | Alignment | Child alignment within container |
| constraints | BoxConstraints | Size constraints |
| transform | string | CSS transform |
| transformAlignment | Alignment | Transform origin |
| clipBehavior | 'none' 'hardEdge' 'antiAlias' | How to clip overflowing content |
| onTap | () => void | Click handler (Flutter-style) |
| onClick | () => void | Click handler |
| cursor | 'pointer' 'default' 'text' | 'none' | Mouse cursor style |
| className | string | Additional CSS classes |
| style | CSSProperties | Inline CSS styles (escape hatch) |
| id | string | HTML id attribute |
| role | string | ARIA role |
| ariaLabel | string | ARIA label |
• Column — Vertical layout with alignment
• Row — Horizontal layout with alignment
• Stack — Layered positioning