Container

Layout

Centers content and applies responsive horizontal padding.

Container constrains a page to a maximum width and keeps it centered with consistent gutters across breakpoints.

npx shadcn@latest add container

Default

The default cap is max-w-7xl with px-4, sm:px-6, and lg:px-8 gutters.

Preview

Live

Centered container

tsx

1<Container maxWidth="max-w-sm">
2  <p className="px-4 py-3">Centered container</p>
3</Container>

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
maxWidth	string= "max-w-7xl"	Tailwind max-width utility to cap the container.
className	string	Override the classes of the wrapper.
as	React.ElementType= "div"	Render the container as a different element.