PxlKitSurfaceProvider

Sets the default surface (pixel | linear) for every nested PxlKit component — React context, Vue provide/inject or Angular dependency injection.

Switches the entire subtree between the pixel and linear aesthetics in one line
Per-component surface prop still overrides the provider for one-off variants
Defaults to "pixel" so consumers without a provider keep the brand look
Renders no element of its own and is safe for server rendering

Status: stable
Category: overlay-foundation
Since: v1.6.0

API

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

Prop	Type	Default	Description
`surface`	`'pixel' \| 'linear'`	`'pixel'`	Surface of every nested component that does not set its own.
`children` (required)	`React.ReactNode`	—	The part of the app the surface applies to.

WCAG target: 2.1 AA

theme/surface context provider; respects color-scheme via theme tokens

Visual-only context provider — does not render interactive DOM and does not affect focus order or ARIA semantics of descendants.

Usage

import { PixelButton, PxlKitSurfaceProvider } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PxlKitSurfaceProvider surface="pixel">
      <div className="flex flex-wrap gap-2">
        <PixelButton>Pixel</PixelButton>
        <PixelButton variant="outline" tone="cyan">Pixel outline</PixelButton>
      </div>
    </PxlKitSurfaceProvider>
  );
}

Examples

Default (Pixel)

import { PixelButton, PxlKitSurfaceProvider } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PxlKitSurfaceProvider surface="pixel">
      <div className="flex flex-wrap gap-2">
        <PixelButton>Pixel</PixelButton>
        <PixelButton variant="outline" tone="cyan">Pixel outline</PixelButton>
      </div>
    </PxlKitSurfaceProvider>
  );
}

Linear

import { PixelButton, PxlKitSurfaceProvider } from '@pxlkit/ui-kit';

export function Linear() {
  return (
    <PxlKitSurfaceProvider surface="linear">
      <div className="flex flex-wrap gap-2">
        <PixelButton>Linear</PixelButton>
        <PixelButton variant="outline" tone="cyan">Linear outline</PixelButton>
      </div>
    </PxlKitSurfaceProvider>
  );
}

Per-component override

import { PixelButton, PxlKitSurfaceProvider } from '@pxlkit/ui-kit';

export function Override() {
  return (
    <PxlKitSurfaceProvider surface="linear">
      <div className="flex flex-wrap gap-2">
        <PixelButton>From the provider</PixelButton>
        <PixelButton surface="pixel">Own surface prop</PixelButton>
      </div>
    </PxlKitSurfaceProvider>
  );
}