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)

<Center max="sm">
  <div className="p-4 bg-surface-sunken rounded-lg border border-border">
    Constrained to screen-sm
  </div>
</Center>

max="md"

max="md" (768px)

<Center max="md">
  <div className="p-4 bg-surface-sunken rounded-lg border border-border">
    Constrained to screen-md
  </div>
</Center>

max="lg"

max="lg" (1024px)

<Center max="lg">
  <div className="p-4 bg-surface-sunken rounded-lg border border-border">
    Constrained to screen-lg
  </div>
</Center>

max="xl"

max="xl" (1280px)

<Center max="xl">
  <div className="p-4 bg-surface-sunken rounded-lg border border-border">
    Constrained to screen-xl
  </div>
</Center>

Padding Control

padding={true} (default)

With responsive padding (px-4 sm:px-6 lg:px-8)

<Center max="md" padding>
  <div className="p-4 bg-surface-sunken ...">
    With responsive horizontal padding
  </div>
</Center>

padding={false}

No padding — content touches edges

<Center max="md" padding={false}>
  <div className="p-4 bg-surface-sunken ...">
    No horizontal padding
  </div>
</Center>

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.
`asChild`	`boolean`	`false`	When true, merges props onto the child element via Radix Slot instead of rendering a wrapping div.