Container
The Container component defines layout boundaries and consistent horizontal and vertical padding. It supports multiple responsive variants for different use-cases, such as pages, sections, or full-width blocks.
Basic Usage
The default variant "constrained-padded" centers content and applies consistent padding.
Centered and padded container
Variants
Each variant provides a distinct layout pattern. Adjust width, padding, or alignment as needed.
full-mobile-padded-top
Full width with top padding on mobile, constrained at large breakpoints.
constrained-padded (default)
Constrained width with responsive horizontal and vertical padding.
full-mobile-breakpoint-padded-top
Full width by default, constrained with top padding after sm breakpoint.
breakpoint-padded
Full width on mobile, constrained and padded at breakpoints.
narrow-padded
Narrower max width, ideal for articles or focused content.
full-width
Spans the full width of the viewport with balanced padding.
Props
Supported properties and default values.
variant?: ContainerVariant– Controls the layout style. Default:"constrained-padded".as?: React.ElementType– The element type to render (e.g."div","section").className?: string– Extends Tailwind classes for additional customization.children: React.ReactNode– Content to be rendered inside the container.
Context Example
How to use Container within a page layout.
Example Section
This section demonstrates a typical use of Container for page content.
Use Container to enforce consistent page padding and content width. Variants like "breakpoint-padded" or "narrow-padded" help maintain visual rhythm across layouts.