Skip to main content
Container centers content with a responsive max-width and horizontal padding that scales with the viewport.

​
Basic Usage

​
Narrowing with css_class

Container ships with a default max-width so content stays centered and doesn’t stretch edge to edge on wide screens. Override that width with a max-w-* class when the content reads better in a tighter column — forms feel more focused at a narrow width, and long-form prose stays comfortable to read when lines don’t run too wide.

​
API Reference

Container Parameters

​
css_class
str | Responsive | None
default:"None"
Additional Tailwind CSS classes. Use max-w-* to constrain width beyond the default responsive breakpoints.

​
Protocol Reference

Container
{
  "type": "Container",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "cssClass?": "string"
}
For the complete protocol schema, see Container.