@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.

Install

npm install @port-labs/anchor-ui

Peer dependencies

Install versions compatible with your app (see package.json):

| Package | Version | Notes | | ------------------------- | --------- | ------------------------------------------------------------------------------------- | | react | ^19.2.4 | | | react-dom | ^19.2.4 | | | @headlessui/react | ^2.2.0 | Required at runtime by several components. | | @port-labs/anchor-icons | * | Required when using icons / components that pass icon props. | | tailwindcss | 4.1.11 | Optional peer — omit if you only use standalone.css (path A under Usage). |

Engines: Node.js 22+.

For Vite, ESM, and Headless UI dedupe, see Bundlers.

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.

Bundlers

The published JS is ESM ("type": "module", exports.import). Use import, not require.

If you mix components from this package with primitives from @headlessui/react in the same tree, pre-bundle the package in dev and dedupe @headlessui/react so there is a single Headless UI copy—see the Port vite.config (optimizeDeps.include / esbuildOptions / resolve.dedupe).

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.