PS1 UI

Getting Started

Install

React 19 is a peer dependency — install it alongside the package.

pnpm add @ps1ui/core react react-dom

Import the stylesheet

The JS entry ships no styles. Import the CSS once at your app's entry point — it brings the design tokens, the canvas (dark by default), and every component's styles.

import "@ps1ui/core/styles.css";

Wrap your app in PS1Root

PS1Root establishes the container-query context that responsive props resolve against. Without it, responsive props silently fall back to their base values. Wrap once, at the top of your tree. Layout primitives can each become a nested context of their own via queryContainer, but never do so by default.

import "@ps1ui/core/styles.css";
import { PS1Root, Button, Heading } from "@ps1ui/core";

export function App() {
  return (
    <PS1Root>
      <Heading level={1}>Hello, PS1 UI</Heading>
      <Button variant="primary">Click me</Button>
    </PS1Root>
  );
}

Theming

Dark is the default. Put data-ps1ui-theme="light" on <html> to theme the whole page, or "system" to follow the OS instead:

<html data-ps1ui-theme="system">

To theme just part of a page, wrap that subtree in <PS1Root theme="light"> instead — a themed PS1Root paints its own canvas and text color too, so the subtree is self-contained, and nesting PS1Roots with different themes works as expected:

<PS1Root theme="light">
  {/* everything in here renders with the light palette */}
  <PS1Root theme="dark">
    {/* ...except this subtree, back to dark */}
  </PS1Root>
</PS1Root>

If your bundler minifies CSS with Lightning CSS (Vite's default), check its CSS target. Below Chrome 123 / Firefox 120 / Safari 17.5, Lightning CSS downlevels light-dark() into a prefers-color-scheme-only fallback, and a per-subtree PS1Root theme stops switching — <html>-level theming and "system" keep working either way. Raise the target to fix it:

build: { cssTarget: ["chrome123", "firefox120", "safari17.5"] }

Next

Browse the components to see everything in the box.