Container.

The invisible spine of your layout. It centers content, enforces consistent max-widths, and manages horizontal padding across different device sizes.

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

Configuration

Use Case

Max Width Constraints

Inspection

Simulated Viewport: 1280px

Full Application Width (LG)

The Scale Illusion

To verify layout components in this documentation, we simulate a 1280px viewport scaled down to 35%. This allows you to see the real behavior of 'xl' or 'lg' containers without needing a massive screen.

Responsive Breathing Room

Hardcoding `px-4` is technical debt. This component uses responsive utilities (`px-4 md:px-6 lg:px-8`) to automatically increase negative space as the viewport grows.

LandingPage.tsx

<Container size="xl" className="py-24">
  <HeroSection />
</Container>

<Container size="sm" className="py-12">
  <BlogPostContent />
</Container>