Skip to content
Pixellence Studio

Projects · Toolkit

Pixie UI

A React kit on Base UI, installed by copying the source or by importing the package.

Blank interface cards and one gold tile on a white table

Pixie UI is how a Pixellence interface gets into someone else’s repository. Behaviour comes from Base UI. The look, the tokens and the installer are ours. Copying gives a team code it can edit. The package gives the same components with upgrades. Both render the same thing.

Solutions

  • Own the source, or take the upgrades

    npx pixie add copies a component and its dependencies into the repo. npm install @pixie-ui/react imports the same component from the package. The choice is per team, not per button.

  • The files land in your folders

    Imports are rewritten to the project’s alias and paths on the way in. A copied button does not point back at this repository. pixie.json records the alias, the CSS file and where components, hooks and utilities go.

  • Next.js and Vite get the same source

    Init detects the framework. App Router and Vite receive identical component source, so a kit change is not a second implementation.

  • Pages, not only parts

    Dashboard, login and settings blocks install and run as they are. The registry is listed with npx pixie list. A different registry, or a local folder, can be passed with --registry.

Process

  1. 01

    Init

    npx pixie init detects the framework, writes pixie.json and installs the theme into the CSS file the project already uses.

  2. 02

    Add

    npx pixie add names the components. The CLI pulls them from the registry, installs their npm dependencies unless told not to, and rewrites the imports.

  3. 03

    Theme

    One token file drives light and dark. A no-flash script covers server-rendered apps. npx pixie theme can apply a token-studio export, and --reset removes those overrides.

  4. 04

    Or skip the copy

    Install @pixie-ui/react, import the theme CSS, and import Button and Card. Upgrades come from the package instead of a second copy in the repo.

Technology

  • Base UI for behaviour

    Focus, dialogs and the other hard interaction problems stay with Base UI. Pixie styles and composes them. We do not reimplement a headless kit.

  • A private registry the CLI can read

    The default registry is a path on the pixie-ui repository. PIXIE_TOKEN is a GitHub token so the CLI can read it while the repo is private. PIXIE_REGISTRY overrides the built-in URL.

  • pixie.json is the contract

    It stores the registry, the alias, the CSS entry, and the paths for components, hooks and utilities. Init can be forced over an existing file. Add can overwrite without asking.

  • React
  • Base UI
  • Next.js
  • Vite
  • CLI
All projectsNext, EventFlow