Container

Centered content wrapper with max-width.

layoutcontainerwrapper

Import

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

Basic Usage

Container Preview

Container centers content with a max-width and horizontal padding.

Code

tsx

<Container>
  <h1>Page Title</h1>
  <p>Page content goes here...</p>
</Container>

Sizes

Different max-width options

1<Container size="sm">Small container (max-w-2xl)</Container>
2<Container size="md">Medium container (max-w-4xl)</Container>
3<Container size="lg">Large container (max-w-6xl)</Container>
4<Container size="xl">Extra large container (max-w-7xl)</Container>
5<Container size="full">Full width container</Container>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring