@photon-ai/pho-ui

@photon-ai/pho-ui

Photon's React component library — the Photon Design System. Built on Base UI and Tailwind v4.

Install

pnpm add @photon-ai/pho-ui

Peer dependencies: react, react-dom, @phosphor-icons/react.

Styles (Tailwind v4)

In your app's CSS:

@import "tailwindcss";
@import "@photon-ai/pho-ui/styles";
@import "@photon-ai/pho-ui/styles/fonts"; /* optional: PolySans + Azeret Mono */
@source "../node_modules/@photon-ai/pho-ui/dist";

Toggle dark mode by setting data-mode="dark" (or a .dark class) on a wrapper.

Usage

import { Button } from "@photon-ai/pho-ui/components/button";
import { Input } from "@photon-ai/pho-ui/components/input";
import { Dialog } from "@photon-ai/pho-ui/components/dialog";

<Button color="primary">Save</Button>;

Prefer the granular entry points (@photon-ai/pho-ui/components/*, @photon-ai/pho-ui/primitives/*, @photon-ai/pho-ui/utils) for best tree-shaking; a root barrel (@photon-ai/pho-ui) is also available.

Links

Pho is router-agnostic. Inject your router's link component once:

import { LinkProvider } from "@photon-ai/pho-ui/utils";

<LinkProvider component={MyRouterLink}>{app}</LinkProvider>;