Container
A layout component for constraining content width with optional padding and centering.
Loading...
Installation
pnpm add @corew500/uiUsage
import { Container } from "@corew500/ui/container"
<Container>
<p>Content is constrained to a readable width.</p>
</Container>Sizes
Control the maximum width of the container.
<Container size="xs">
{/* max-w-xs: 20rem / 320px */}
</Container>
<Container size="sm">
{/* max-w-sm: 24rem / 384px */}
</Container>
<Container size="md">
{/* max-w-md: 28rem / 448px (default) */}
</Container>
<Container size="lg">
{/* max-w-lg: 32rem / 512px */}
</Container>
<Container size="xl">
{/* max-w-xl: 36rem / 576px */}
</Container>
<Container size="2xl">
{/* max-w-2xl: 42rem / 672px */}
</Container>
<Container size="3xl">
{/* max-w-3xl: 48rem / 768px */}
</Container>
<Container size="4xl">
{/* max-w-4xl: 56rem / 896px */}
</Container>
<Container size="full">
{/* max-w-full: No constraint */}
</Container>Padding
Add consistent padding around the content.
<Container padding="none">
{/* No padding */}
</Container>
<Container padding="sm">
{/* 1rem padding */}
</Container>
<Container padding="md">
{/* 1.5rem padding */}
</Container>
<Container padding="lg">
{/* 2rem padding */}
</Container>Centered
Vertically and horizontally center content.
<Container size="sm" centered>
<LoginForm />
</Container>This adds flex flex-col items-center justify-center to the container.
Common Patterns
Page Layout
<Container size="4xl" padding="lg">
<Stack spacing={8}>
<Heading level={1}>Page Title</Heading>
<Text>Page content...</Text>
</Stack>
</Container>Centered Form
<Container size="sm" centered>
<Card>
<Stack spacing={4}>
<Heading level={2}>Sign In</Heading>
<LoginForm />
</Stack>
</Card>
</Container>Article Content
<Container size="2xl" padding="md">
<article>
<Heading level={1}>Article Title</Heading>
<Text variant="bodyLarge">
Article content with optimal reading width...
</Text>
</article>
</Container>With Stack
Container and Stack work well together for page layouts.
<Container size="lg">
<Stack spacing={6}>
<Heading level={1}>Dashboard</Heading>
<BentoGrid columns={3}>
<BentoGridItem>Widget 1</BentoGridItem>
<BentoGridItem>Widget 2</BentoGridItem>
<BentoGridItem>Widget 3</BentoGridItem>
</BentoGrid>
</Stack>
</Container>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | enum | "full" | Maximum width constraint for the container. - `xs`: 20rem (320px) - `sm`: 24rem (384px) - `md`: 28rem (448px) - `lg`: 32rem (512px) - `xl`: 36rem (576px) - `2xl`: 42rem (672px) - `3xl`: 48rem (768px) - `4xl`: 56rem (896px) - `5xl`: 64rem (1024px) - `6xl`: 72rem (1152px) - `7xl`: 80rem (1280px) - `full`: No max-width constraint |
| padding | enum | "md" | Padding applied to all sides of the container. - `none`: No padding - `sm`: 1rem (16px) - `md`: 1.5rem (24px) - `lg`: 2rem (32px) - `xl`: 2.5rem (40px) - `responsive`: Scales with viewport (px-4 py-6 on mobile, grows on larger screens) - `section`: Horizontal-only responsive padding for page sections (px-4 to 2xl:px-24) |
| centered | enum | false | Whether to center content both vertically and horizontally. When true, applies flexbox centering (flex-col items-center justify-center). |
Accessibility
Keyboard Navigation
- Does not affect tab order or screen reader navigation
Additional
- - Container is a purely visual layout component with no semantic meaning
- Uses a plain `<div>` element; wrap in appropriate semantic elements (main, section, article) as needed
Localization
Translatable Content
- - Container has no text content and requires no localization
RTL Support
- Width constraints work correctly in both LTR and RTL layouts