UI ComponentsLayout
Container
Constrain content to the theme's responsive page width.
Import
import { Container } from "@puzzle-ui/ui";Usage
Use Container for width constraints without introducing a surface or section theme.
The base puzzle-container class limits its maximum width to
var(--puzzle-container-width, 80rem). Width preset classes override this limit
for content, prose, or full-width containers.
API
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | "div" | Semantic root element. |
children | ReactNode | - | Constrained content. |
className | string | - | Additional root classes. |
Native props and refs for the chosen element are forwarded. For theme backgrounds and vertical section spacing, use Section.