Container

Centers content with a max-width and horizontal padding.

import { Container } from "@ps1ui/core";

Sizes

size="sm" — max-width 40rem

size="md" — max-width 48rem

size="full" — unbounded

<Container size="sm">max-width 40rem</Container>
<Container size="md">max-width 48rem</Container>
<Container size="full">unbounded</Container>

px switches from md to 2xl at the md container breakpoint.

<Container size="sm" px={{ base: "md", md: "2xl" }}>
  Horizontal padding scales with the container width.
</Container>

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"lg"`	Max-width preset; "full" removes the cap.
`px`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"lg"`	Horizontal padding on the space scale.

All native <div> attributes are also accepted.