Layout
MaxWidthWrapper
A responsive container that constrains content width and applies consistent horizontal padding. Ideal for page layouts and readable content width.
MaxWidthWrapper
MaxWidthWrapper provides a consistent, centered content container with responsive horizontal padding. Use it to keep content at a readable width and to standardize layout spacing across pages.
Use MaxWidthWrapper for page sections (headers, mains, footers) to ensure your content stays readable and aligned. You can still add custom padding via className or style when needed.
Features
- Consistent maximum width across breakpoints
- Responsive left/right padding by default
- Works with any child content
- Customizable via
classNameandstyle
Usage
import { MaxWidthWrapper } from '@loke/design-system/max-width-wrapper';
export default function Example() {
return (
<MaxWidthWrapper>
<h1>My Content</h1>
<p>This content is centered and constrained for readability.</p>
</MaxWidthWrapper>
);
}Tips:
- Stack multiple sections with
MaxWidthWrapperfor a cohesive page layout - Add custom padding with Tailwind classes (e.g., px-4 md:px-8) or with inline styles
- Combine with
Box,Stack, andColumnsto structure inner content
Props
Prop
Type
Examples
Default
<MaxWidthWrapper>
<div className="w-full border border-zinc-400 border-dashed bg-zinc-200 p-4">
{/* Content */}
</div>
</MaxWidthWrapper>With background color
Background via className
<MaxWidthWrapper className="bg-blue-50">
<div className="w-full border border-blue-300 border-dashed p-4">...</div>
</MaxWidthWrapper>With custom padding
Custom horizontal padding
<MaxWidthWrapper className="px-4 md:px-8 lg:px-12">
<div className="w-full border border-zinc-300 border-dashed p-4">...</div>
</MaxWidthWrapper>With border and radius
Bordered wrapper
<MaxWidthWrapper className="border border-blue-300 rounded-lg">
<div className="w-full p-4">...</div>
</MaxWidthWrapper>With custom style
Inline styles
<MaxWidthWrapper
style={{ backgroundColor: '#f0f7ff', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}
>
<div className="w-full border border-blue-200 p-4">...</div>
</MaxWidthWrapper>Nested content
Section Title
Panel 1
Panel 2
<MaxWidthWrapper>
<h2 className="mb-4 p-2 font-bold text-2xl">Section Title</h2>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{/* panels */}
</div>
</MaxWidthWrapper>Responsive view (default padding demo)
Resize the window to see responsive padding changes
Default: px-2.5 on mobile, px-20 on md screens and up
<div className="mb-4 bg-red-100 p-2 text-center">Resize to see padding change</div>
<MaxWidthWrapper className="bg-blue-50">
<div className="border border-blue-300 border-dashed p-4">...</div>
</MaxWidthWrapper>Best practices
- Wrap page sections (headers, mains, footers) with
MaxWidthWrapperfor consistent alignment - Add context-specific padding via
className(e.g.,px-4 md:px-8) rather than inline styles when possible - Keep the wrapper responsible for width and outer spacing; compose internal layout with
Stack,Inline,Columns, andBox