ComponentsLayout
Container
Max-width centered wrapper for page content with token-driven horizontal padding.
npx visor add containerWhy Container?
Container centralizes the "centered column with horizontal padding" pattern so every page route shares the same max-width vocabulary. Sizes map to the standard Visor responsive breakpoints, keeping page content widths consistent with the breakpoint system used elsewhere in the library.
Default size is "lg" (1024px). Default padding is "md" (1rem).
Sizes
| Size | Max-width |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px (default) |
xl | 1280px |
full | no limit |
Default Container
Page content
Narrow Reading Column
<Container size="md" padding="lg" as="article">
Narrow reading column with extra horizontal padding.
</Container>Polymorphic as
<Container as="main">
<h1>Page</h1>
<p>Content</p>
</Container>Installation
npx visor add containerAPI Reference
ContainerProps
| Prop | Type | Default | Description |
|---|---|---|---|
as | keyof React.JSX.IntrinsicElements | 'div' | HTML element to render. |
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | Max-width preset (sm 640px, md 768px, lg 1024px, xl 1280px, full no limit). |
padding | ContainerSpacing | 'md' | Horizontal padding token. |
The component also accepts all standard HTML attributes for the rendered element.