# Container

> Sets the maximum width and side padding that every section uses. Both come from the container tokens.

Facade UI item `container` (ui, atom).
Docs page: https://facadeui.dev/components/container · Registry JSON: https://facadeui.dev/r/container.json

## Install

```bash
npx shadcn@latest add @facade/container
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/container.json`. The CLI also installs what it needs: @facade/utils.

Files: `components/ui/container.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/container-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { Container } from "@/components/ui/container"

const sizes = ["sm", "md", "lg"] as const

export function Demo() {
  return (
    <div className="flex flex-col gap-4 py-4">
      {sizes.map((size) => (
        <Container key={size} size={size}>
          <div className="bg-accent text-accent-foreground rounded-lg px-4 py-3 text-sm font-medium">
            size=&quot;{size}&quot;
          </div>
        </Container>
      ))}
    </div>
  )
}
```

## Props

### ContainerProps

Extends Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
>.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `ContainerElement` | `"div"` |  |
| `size` | `"sm" \| "md" \| "lg" \| "full"` | `"lg"` | `lg` uses `--facade-container-max`. `sm` and `md` are narrower, for text. |
| `gutter` | `boolean` | `true` | Set `false` to remove the side padding, for example for a full-width child. |
| `children` | `ReactNode` |  |  |