Preview

XS Container (max-w-sm)

SM Container (max-w-4xl)

Installation

<> import.ts
import Container from "@/components/ui/container"

Code

<> component.tsx
import Container from "@/components/ui/container"

<Container />

API Reference

Container

Responsive centered layout container with size and padding controls.

<> import.ts
import Container from "@/components/ui/container"

Props

PropTypeDefaultDescription
children
React.ReactNode—Content to wrap
className
string""Additional CSS classes
size
"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl""xl"Max-width breakpoint
padding
"sm" | "md" | "lg""md"Horizontal padding