Layout Primitives
Center
A centering layout component that constrains content to a maximum width and centers it horizontally with optional responsive padding. Use Center to create readable content columns and page-width containers.
Max-Width Variants
max="sm"
max="sm" (640px)
max="md"
max="md" (768px)
max="lg"
max="lg" (1024px)
max="xl"
max="xl" (1280px)
Padding Control
padding={true} (default)
With responsive padding (px-4 sm:px-6 lg:px-8)
padding={false}
No padding — content touches edges
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
max | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "2xl" | Maximum width constraint applied to the container. |
padding | boolean | true | Adds responsive horizontal padding (px-4 sm:px-6 lg:px-8) when true. |
render | ReactElement | — | Render a different element instead of a wrapping div, merging this component's props onto it (e.g. render={<section />}). |
Import
import { Center } from "@mikenotthepope/substrateui"