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 dark canvas, 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.

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>
  );
}

Next

Browse the components to see everything in the box.