Container
Page-level max-width wrapper with automatic centering and responsive padding.
Content constrained to max-w-2xl, centered with responsive padding.
<Container maxWidth="2xl"> <DecorativeBox className="p-6"> Content constrained to max-w-2xl, centered with responsive padding. </DecorativeBox></Container>Usage
import { Container } from "@reva/ui";Container is a max-width wrapper with automatic centering and responsive horizontal padding. For un-opinionated flex, use Flex. For stacking with defaults, use Stack.
Examples
Max Width
Use the maxWidth prop to set the container's maximum width.
sm
md
lg
xl
<VStack gap={4} className="w-full"> <Container maxWidth="sm"> <DecorativeBox>sm</DecorativeBox> </Container> <Container maxWidth="md"> <DecorativeBox>md</DecorativeBox> </Container> <Container maxWidth="lg"> <DecorativeBox>lg</DecorativeBox> </Container> <Container maxWidth="xl"> <DecorativeBox>xl</DecorativeBox> </Container></VStack>Props
| Prop | Type | Default | Description |
|---|---|---|---|
maxWidth | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | "prose" | "7xl" | Maximum width of the container. |
center | boolean | true | Center horizontally with mx-auto. |
padding | boolean | true | Responsive horizontal padding (px-4 sm:px-6 lg:px-8). |
as | HTML element | "div" | Rendered element. |
asChild | boolean | false | Merge props onto the child element. |
className | string | — | Additional Tailwind / utility classes. |