Constrain and align page content with responsive gutters and compact, wide, or full width options.
Change any prop and inspect the server-rendered component immediately.
<Container>
<div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div>
</Container>Compare configurations and resize the browser to check responsive behavior.
Keep page content aligned to a predictable readable width.
<Container>
<div class="showcase-content-block">Centered container content</div>
</Container>Use a smaller maximum width for forms, legal copy, and focused content.
<Container
size="compact"
maxWidth="compact">
<div class="showcase-content-block">Compact readable content</div>
</Container>Allow dashboards and data-heavy pages to use the available width.
<Container
size="spacious"
maxWidth="full">
<div class="showcase-content-block">Full-width dashboard content</div>
</Container>All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
columns | number | 2 | No |
gap | string | "md" | No |
maxWidth | string | "xl" | No |
centered | boolean | true | No |
class | string | "" | No |