Component reference
Container
Centers content at one of the page widths.
Preview
Keeping reading focused
Content width comes from the theme; the same structure can fit compact tools and reading scenarios.
render: () => (
<Stack gap="relaxed">
{(["narrow", "content", "wide", "page", "full"] as const).map((width) => (
<Container width={width}>
<Stack gap="compact">
<strong>
{
{
narrow: "Short form",
content: "Primary reading",
wide: "Wide workspace",
page: "Page body (margins on both sides, 16px on narrow screens)",
full: "Fills the available space",
}[width]
}
</strong>
<span>
Content wraps naturally within the current container and keeps a clear reading start;
width does not change the order of information.
</span>
</Stack>
</Container>
))}
</Stack>
)Installation
bun add meowtail
Usage
import { Container } from "meowtail";Examples
The other stories that show this component.
Semantic whitespace and continuous reading
The page keeps its edges along the existing semantic tokens, and long content uses natural page scrolling; width changes do not remount the draft or the trailing actions.
render: () => (
<Container as="main" width="page" data-container-page>
<Stack>
<PageHeader
title="Check page whitespace and reading order"
description="This is an isolated natural page composition; it reads no data and saves no settings."
/>
<Field label="Page draft" htmlFor="container-page-draft">
<Input
id="container-page-draft"
placeholder="Keep the current input and continue checking the page"
/>
</Field>
<Stack gap="compact">
{Array.from({ length: 24 }, (_, index) => (
<p>
Reading paragraph {index + 1}: The title, input, and trailing actions line up in the
same natural content column; long descriptions wrap fully, and after the window
changes you can continue checking from the current content.
</p>
))}
</Stack>
<Inline as="footer">
<Button variant="outline">Check trailing actions</Button>
<span>
Trailing actions keep their natural position and never cover the body as a fixed
overlay.
</span>
</Inline>
</Stack>
</Container>
)API reference
Props
| Prop | Type | Default |
|---|---|---|
width | "narrow" | "content" | "wide" | "page" | "full" | "content" |
as | "div" | "section" | "main" | "article" | "aside" | "div" |
Also takes className, children and the attributes and events of its root element.
DOM parts
root
Registry
The component is registered as container in the meowtail component registry.