# Container (/docs/container)





`Container` wraps a page-level region in a centered, capped column. The `size` prop tracks Tailwind's `screen-*` breakpoints so a `size="lg"` container caps at the lg breakpoint width (\~1024px).

```tsx
import { Container } from '@42-central/ui-react/container';

<Container size="lg" padding="md">
  Page content goes here.
</Container>
```

## Playground [#playground]

<story.Playground />

### Full prop browser [#full-prop-browser]

<story.WithControl />

## Sizes [#sizes]

<Preview align="block" code="&#x22;<Container size=\&#x22;sm\&#x22;>…</Container>\n<Container size=\&#x22;md\&#x22;>…</Container>\n<Container size=\&#x22;lg\&#x22;>…</Container>     {/* default */}\n<Container size=\&#x22;xl\&#x22;>…</Container>\n<Container size=\&#x22;2xl\&#x22;>…</Container>\n<Container size=\&#x22;full\&#x22;>…</Container>   {/* no cap */}&#x22;">
  <div className="space-y-2">
    <Container size="sm" padding="md" className="rounded-md border border-gray-light-300 bg-gray-light-50 py-2 text-center text-sm dark:border-gray-dark-700 dark:bg-gray-dark-900">
      sm — 640px
    </Container>

    <Container size="md" padding="md" className="rounded-md border border-gray-light-300 bg-gray-light-50 py-2 text-center text-sm dark:border-gray-dark-700 dark:bg-gray-dark-900">
      md — 768px
    </Container>

    <Container size="lg" padding="md" className="rounded-md border border-gray-light-300 bg-gray-light-50 py-2 text-center text-sm dark:border-gray-dark-700 dark:bg-gray-dark-900">
      lg — 1024px (default)
    </Container>

    <Container size="xl" padding="md" className="rounded-md border border-gray-light-300 bg-gray-light-50 py-2 text-center text-sm dark:border-gray-dark-700 dark:bg-gray-dark-900">
      xl — 1280px
    </Container>
  </div>
</Preview>

## Padding [#padding]

Horizontal padding scales modestly across the `padding` axis. `lg` adds extra breathing room on desktop only.

```tsx
<Container padding="none">…</Container>
<Container padding="sm">…</Container>
<Container padding="md">…</Container>   {/* default */}
<Container padding="lg">…</Container>   {/* px-6 md:px-8 */}
```

## API [#api]

<TypeTable
  type="{
  size: {
    type: &#x22;'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'&#x22;,
    default: &#x22;'lg'&#x22;,
    description: 'Max content width. Maps to Tailwind screen-* breakpoints. `full` removes the cap.',
  },
  padding: {
    type: &#x22;'none' | 'sm' | 'md' | 'lg'&#x22;,
    default: &#x22;'md'&#x22;,
    description: 'Horizontal padding. `lg` adds extra inset on md+ viewports.',
  },
  asChild: {
    type: 'boolean',
    default: 'false',
    description: 'Render children as the root element (Ark UI polymorphism).',
  },
}"
/>