@port-labs/anchor-ui

React UI primitives used by Port. This package is published to npm for adopters who want the same components outside the main Port app.

Requirements

• Node.js 22+
• React 19+, React DOM 19+
• Vite 7+ with @vitejs/plugin-react and vite-plugin-svgr (see peerDependencies in package.json)
• @port-labs/anchor-icons as a peer dependency (publish or link that package in your environment if you use icon-driven components)
• Tailwind CSS 4.x — only if you integrate using the JIT path below (tailwindcss is an optional peer if you use the pre-built CSS bundle instead)

Install

npm install @port-labs/anchor-ui

Install matching peer dependency versions for your app.

Usage

You must load either the pre-built stylesheet or Anchor theme CSS plus your own Tailwind pipeline. The JS entry only pulls in fonts as a side effect; it does not auto-import theme or utility CSS (so we do not double-ship styles when you choose one integration path).

import { Button, Typography } from '@port-labs/anchor-ui';

Subpath exports are listed in package.json → exports. Only those entry points are guaranteed in the npm tarball.

A — Pre-built CSS (no Tailwind setup for this library)

At build time we compile Tailwind + Anchor theme + utilities used in this package into a single file. Import it like any static CSS (no @source, no content config for @port-labs/anchor-ui):

@import '@port-labs/anchor-ui/standalone.css';

Or in HTML, load node_modules/@port-labs/anchor-ui/dist/standalone.css.

Use this when your app does not run Tailwind for Anchor, or you want adopters to “drop in” one file. You can omit the optional tailwindcss peer if everything else still satisfies npm.

Caveat: If your app also uses Tailwind globally, avoid importing both standalone.css and a second full @import "tailwindcss" that re-applies the same preflight/layers unless you know what you are merging—prefer path B for a single Tailwind graph.

B — Tailwind in your app (smaller CSS, shared config)

Import Anchor theme tokens and register the package for class detection:

@import 'tailwindcss';
@import '@port-labs/anchor-ui/main.css';

Tailwind does not scan node_modules by default. In the same global stylesheet, add an @source path relative to that file to the installed package’s dist directory (npm does not ship src/).

There is no @source package-name shortcut—use a filesystem path, per the Tailwind v4 docs.

Examples (count ../ until you reach the directory that contains node_modules):

• CSS at src/styles/app.css and node_modules next to package.json:

  @source "../../node_modules/@port-labs/anchor-ui/dist";

• CSS under apps/my-app/... with dependencies hoisted to the repo root:

  @source "../../../../node_modules/@port-labs/anchor-ui/dist";

If you truly cannot scan dist, you can safelist utilities with @source inline("…"), but scanning dist is the normal approach.

Vite + CommonJS entry

The published JS is CommonJS. In Vite, pre-bundle the package in dev, dedupe @headlessui/react, and widen build.commonjsOptions.include for production if you see missing named exports or duplicate Headless UI context—see the Port frontend app.

Source and issues

Source of truth and issue tracker live in the monorepo: github.com/port-labs/Port (directory packages/anchor-ui).

License

ISC — see LICENSE.