PS1Root

App-level wrapper that establishes the responsive containment context.

import { PS1Root } from "@ps1ui/core";

Usage

Wrap your app in PS1Root once, at the top of the tree. Responsive props on descendant components resolve against it — without a PS1Root ancestor they silently fall back to their base values.

import { PS1Root } from "@ps1ui/core";

export function App() {
  return (
    <PS1Root>
      {/* your app */}
    </PS1Root>
  );
}

PS1Root is the only component that is a container-query context unconditionally. Container, Grid and Stack can each become one too, but only when you pass them queryContainer — establishing a context costs an element its intrinsic width, so it is never applied for you.

A PS1Root given a theme paints its own canvas and text color, so a themed subtree like either one below is self-contained. An untheme'd PS1Rootpaints nothing.

Theme

Light

Dark

<Grid columns={{ base: 1, md: 2 }} gap="lg">
  <PS1Root theme="light" style={{ padding: 16 }}>
    <Card>
      <Text>Light</Text>
      <Button variant="primary">Click me</Button>
    </Card>
  </PS1Root>
  <PS1Root theme="dark" style={{ padding: 16 }}>
    <Card>
      <Text>Dark</Text>
      <Button variant="primary">Click me</Button>
    </Card>
  </PS1Root>
</Grid>

Props

Prop	Type	Default	Description
`theme`	`"light" \| "dark" \| "system"`	—	Color theme for this subtree. A themed root also paints the subtree's canvas and text color. Omit to inherit the ancestor's theme (dark under styles.css; the host's `color-scheme` under components.css) — or, when a passthrough `data-ps1ui-theme` attribute is given directly, to defer to that instead.

All native <div> attributes are also accepted.