Layout

Container

Centres content and caps its measure.

Server-renderable1 export

Constrains content width and centres it, with responsive inline padding so text never touches the viewport edge.

Import

import { Container } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/container.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Long-form text stays readable at a comfortable measure, rather than running the full width of a wide display.

<Container size="sm">
  <Text>Long-form text stays readable at a comfortable measure.</Text>
</Container>

Container props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
size	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"lg"`	Maximum inline size.
padded	`boolean`	`true`	Adds responsive inline padding.