---
title: Container
description: Responsive centered container with built-in padding.
icon: box
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

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

## Basic Usage

<ComponentPreview json={{"view":{"type":"Container","children":[{"content":"The Hitchhiker's Guide to the Galaxy","type":"H1"},{"content":"A wholly remarkable book, the standard repository for all the knowledge and wisdom in the Galaxy.","type":"P"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQ29udGFpbmVyLAogICAgSDEsCiAgICBQLAopCgp3aXRoIENvbnRhaW5lcigpOgogICAgSDEoIlRoZSBIaXRjaGhpa2VyJ3MgR3VpZGUgdG8gdGhlIEdhbGF4eSIpCiAgICBQKAogICAgICAgICJBIHdob2xseSByZW1hcmthYmxlIGJvb2ssIHRoZSBzdGFuZGFyZCIKICAgICAgICAiIHJlcG9zaXRvcnkgZm9yIGFsbCB0aGUga25vd2xlZGdlIGFuZCIKICAgICAgICAiIHdpc2RvbSBpbiB0aGUgR2FsYXh5LiIKICAgICkK">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Container,
    H1,
    P,
)

with Container():
    H1("The Hitchhiker's Guide to the Galaxy")
    P(
        "A wholly remarkable book, the standard"
        " repository for all the knowledge and"
        " wisdom in the Galaxy."
    )
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Container",
    "children": [
      {"content": "The Hitchhiker's Guide to the Galaxy", "type": "H1"},
      {
        "content": "A wholly remarkable book, the standard repository for all the knowledge and wisdom in the Galaxy.",
        "type": "P"
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Narrowing with css_class

Override the default max-width for narrower content areas like forms or prose.

<ComponentPreview json={{"view":{"cssClass":"max-w-2xl","type":"Container","children":[{"content":"The ships hung in the sky in much the same way that bricks don't.","type":"P"}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29udGFpbmVyLCBQCgp3aXRoIENvbnRhaW5lcihjc3NfY2xhc3M9Im1heC13LTJ4bCIpOgogICAgUCgKICAgICAgICAiVGhlIHNoaXBzIGh1bmcgaW4gdGhlIHNreSBpbiBtdWNoIHRoZSIKICAgICAgICAiIHNhbWUgd2F5IHRoYXQgYnJpY2tzIGRvbid0LiIKICAgICkK">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Container, P

with Container(css_class="max-w-2xl"):
    P(
        "The ships hung in the sky in much the"
        " same way that bricks don't."
    )
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "max-w-2xl",
    "type": "Container",
    "children": [
      {
        "content": "The ships hung in the sky in much the same way that bricks don't.",
        "type": "P"
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Container Parameters">
<ParamField body="css_class" type="str | Responsive | None" default="None">
  Additional Tailwind CSS classes. Use `max-w-*` to constrain width beyond the default responsive breakpoints.
</ParamField>
</Card>

## Protocol Reference

```json Container
{
  "type": "Container",
  "children?": "[Component]",
  "let?": "object",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Container](/protocol/container).
