Container
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Container } from "@corew500/ui/container"
<Container>Content</Container>Variants
containerVariants
| Axis | Values | Default |
|---|---|---|
| size | xssmmdlgxl2xl3xl4xl5xl6xl7xlfull | full |
| padding | nonesmmdlgxlresponsivesection | md |
| centered | truefalse | false |
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