Container
Centered, max-width content wrapper. Caps page width and adds responsive horizontal padding.
Container wraps a page-level region in a centered, capped column. The size prop tracks Tailwind's screen-* breakpoints so a size="lg" container caps at the lg breakpoint width (~1024px).
import { Container } from '@42/ui-react/container';
<Container size="lg" padding="md">
Page content goes here.
</Container>Playground
Component
Presets
Default container. Wraps content at the lg breakpoint.
Props
Code
<Component size="lg" padding="md"> Default container. Wraps content at the lg breakpoint.</Component>Full prop browser
Default container. Wraps content at the lg breakpoint.
Sizes
sm — 640px
md — 768px
lg — 1024px (default)
xl — 1280px
<Container size="sm">…</Container>
<Container size="md">…</Container>
<Container size="lg">…</Container> {/* default */}
<Container size="xl">…</Container>
<Container size="2xl">…</Container>
<Container size="full">…</Container> {/* no cap */}Padding
Horizontal padding scales modestly across the padding axis. lg adds extra breathing room on desktop only.
<Container padding="none">…</Container>
<Container padding="sm">…</Container>
<Container padding="md">…</Container> {/* default */}
<Container padding="lg">…</Container> {/* px-6 md:px-8 */}API
Prop
Type