PixelCenter

Polymorphic max-width wrapper that centers content horizontally with token-driven page gutters.

Token-driven max-width via the containerWidth scale
Token-driven horizontal padding via the pageGutter scale
Polymorphic via the as prop (in Angular, the element you put pxlCenter on) — inherits semantics from the chosen element
Optional text alignment helper (left / center / right)
Surface-aware transition tokens

Status: stable
Category: layout
Since: v1.6.0

API

import { PixelCenter } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`maxWidth`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl' \| '6xl' \| '7xl' \| 'prose' \| 'full'`	`'5xl'`	Width cap (`containerWidth`).
`gutter`	`0 \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'lg'`	Horizontal padding (`pageGutter`).
`align`	`'left' \| 'center' \| 'right'`	—	Text alignment of the centered content (canonical).
`text`	`'left' \| 'center' \| 'right'`	—	Deprecated. Use `align` instead. Retained as alias for one minor.
`inline`	`boolean`	`false`	`inline-block` instead of `block`.
`as`	`keyof React.JSX.IntrinsicElements`	—	Element to render.
`surface`	`'pixel' \| 'linear'`	—	Surface override; defaults to the nearest provider.
`bordered`	`boolean`	`false`	Surface border and radius.

Also takes the native attributes and event handlers of <div> (HTMLAttributes<HTMLDivElement>).

ref points to <div>.

WCAG target: 2.1 AA

polymorphic-wrapper

Renders as <div> by default; consumers pass as to inherit appropriate semantics (e.g. section, main, article). No additional ARIA is required.

Usage

import { PixelCenter } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelCenter>
      <p className="text-sm text-retro-muted">
        Centered content with the default max-width and page gutter.
      </p>
    </PixelCenter>
  );
}

Examples

Default

import { PixelCenter } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelCenter>
      <p className="text-sm text-retro-muted">
        Centered content with the default max-width and page gutter.
      </p>
    </PixelCenter>
  );
}

Narrow Prose

import { PixelCenter } from '@pxlkit/ui-kit';

export function NarrowProse() {
  return (
    <PixelCenter maxWidth="2xl" text="left">
      <p className="text-sm text-retro-muted">
        A narrower max-width is useful for long-form reading flows where measure matters.
      </p>
    </PixelCenter>
  );
}

Text Centered

import { PixelCenter } from '@pxlkit/ui-kit';

export function TextCentered() {
  return (
    <PixelCenter maxWidth="3xl" text="center" gutter="md">
      <p className="text-sm text-retro-muted">
        Both the wrapper and the inner text are centered.
      </p>
    </PixelCenter>
  );
}

As Section

import { PixelCenter } from '@pxlkit/ui-kit';

export function AsSection() {
  return (
    <PixelCenter as="section" maxWidth="4xl" gutter="lg" surface="pixel">
      <p className="text-sm text-retro-muted">
        Polymorphic: renders as a semantic &lt;section&gt; on the pixel surface.
      </p>
    </PixelCenter>
  );
}

Related