Installation

Install the public alpha from npm:

npm install @pane-ui/react@alpha

The current version is 0.1.0-alpha.0. APIs may change before 1.0.

Requirements

Use React and React DOM 19 with an ESM-capable toolchain. Repository development uses Node 22.22.2. The package does not depend on Next.js or Tailwind and does not declare React 18 or CommonJS support.

Build locally (optional)

Run these commands from the repository root:

npm ci
npm run build:library
npm pack ./packages/react

For version 0.1.0-alpha.0, npm writes pane-ui-react-0.1.0-alpha.0.tgz into the current directory. Use the filename printed by npm pack if the version changes.

In your separate React 19 project, install that file using its actual path:

npm install /absolute/path/to/pane-ui-react-0.1.0-alpha.0.tgz

The /absolute/path/to/ prefix is a placeholder for your checkout location. npm pack creates an archive; it does not publish anything.

Render your first screen

import { Theme, TileGrid, Tile, TileLink } from "@pane-ui/react";
import "@pane-ui/react/styles.css";
 
export function Start() {
  return (
    <Theme mode="dark" accent="blue">
      <TileGrid>
        <TileLink href="/inbox" label="mail">
          3 new messages
        </TileLink>
        <Tile label="weather">24°</Tile>
        <Tile label="today" size="wide" accent="subtle">
          Make room for something good.
        </Tile>
      </TileGrid>
    </Theme>
  );
}

Create an /inbox destination in your application, or replace that href. Import the full stylesheet once from your application entry or root layout. It includes motion styles and applies no global reset. The separately exported @pane-ui/react/motion.css is available for motion-only usage; do not import it in addition to the full stylesheet.

Server rendering

The built JavaScript preserves client directives. In a Next.js App Router application, import styles in a layout and place event handlers/state in client components. Initial visible Transition content is readable in server markup. Interactive controls require hydration; native dialogs and popovers enter the top layer on the client.

The package exports TypeScript prop types alongside components. Import a type with import type { ButtonProps } from "@pane-ui/react" when building application wrappers.

When something looks wrong

If controls are unstyled, check that the stylesheet is imported and the subtree has a Theme. If package exports cannot resolve, rebuild the library before packing and install the new archive. A changed source checkout does not update a tarball already installed in another app. See support requirements for modern browser APIs.