# Container

Source: https://lumeo.nativ.sh/components/container

# Container

A responsive container that constrains content width and centers it on the page.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Container />

Preview Code

Centered Content

Content centered within max-w-md

Preview Code

Different Max Widths

max-w-sm

max-w-md

max-w-lg

max-w-xl

Preview Code

MaxWidth — interactive

Pick a max-width to see it applied live.

xssmmdlgxl2xlfull

max-w-md

## API Reference

### Container

Property

Type

Default

Description

MaxWidth

string?

"lg"

Maximum width. Maps to max-w-{value} (e.g. "sm", "md", "lg", "xl", "2xl").

Center

bool

true

Whether to horizontally center the container using mx-auto.

Padding

string?

"4"

Horizontal padding applied via px-{value}.