Container
v1.0.1Updated 20 Jul 2026Max-width centered wrapper with 13 width tokens (xs through 9xl + prose + full) and 5 padding scales. Use as the outer wrapper of any page content area.
Preview
Live · 8 storiesMax WidthsOpen ↗
▸Why this is recommendedcontainermax-widthwrapperlayout+3
Container — max widths.
Recommended for+14
- ✓Outer page wrapper
- ✓Marketing sections
- ✓Form pages
- ✓Article / prose surfaces (prose width)
Tags+6
containermax-widthwrapperlayoutmuimaxwidths
Features+4
- 13 max-width tokens (xs / sm / md / lg / xl / 2xl … 9xl / prose / full)
- 5 padding scales (none / xs / sm / md / lg)
- Centered horizontally
- Composable with Paper / Card inside
Not recommended for−2
- ✕Full-bleed dashboards (use AppShell main slot)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
maxWidthMax-width token
—paddingPadding scale
—