Loading...
Loading...
> A responsive container component for consistent page width and padding.
1import { Container } from "@/components/ui/container"
1<Container>2 <div>Content</div>3</Container>
1<Container size="sm">2 <div>Content</div>3</Container>
1<Container size="md">2 <div>Content</div>3</Container>
1<Container size="lg">2 <div>Content</div>3</Container>
1<Container size="xl">2 <div>Content</div>3</Container>
1<Container size="2xl">2 <div>Content</div>3</Container>
1<Container size="prose">2 <article>Content</article>3</Container>
1<Container padding="none">2 <div>Content</div>3</Container>
1<Container as="main">2 <div>Main content</div>3</Container>
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "prose" | "2xl" | Maximum width of the container. |
| padding | "none" | "sm" | "md" | "lg" | "xl" | "md" | Horizontal padding applied to the container. |
| as | React.ElementType | "div" | HTML element to render (div, main, section, article, etc.). |