Installation

Requirements

• React 18 or later, with React DOM.
• Tailwind CSS 4.3.3 or a later 4.x release. Tailwind CSS 3 is not supported.
• Node.js 22 or later, only for the oprt command line.

Install the packages

pnpm add @oprt/react @oprt/tokens
pnpm add -D @oprt/tailwind tailwindcss@^4.3.3

With npm, run npm install @oprt/react @oprt/tokens and npm install -D @oprt/tailwind tailwindcss@^4.3.3.

Add OPERATOR to your stylesheet

Set up Tailwind CSS 4 the way your framework does (@tailwindcss/vite, @tailwindcss/postcss or the Tailwind CLI). Then add the plugin and the components to the stylesheet where Tailwind is imported:

@import "tailwindcss";
@plugin "@oprt/tailwind";
/* The components ship as compiled JavaScript, which Tailwind does not scan on its own. The path
   is relative to this file; without it the components render unstyled. */
@source "../node_modules/@oprt/react/dist";

Import the tokens

Import the tokens once, at the application root, before that stylesheet. They bring the dark Bone theme and the OPERATOR Sans and Mono fonts.

import "@oprt/tokens";
import "./globals.css";

Load the tokens from JavaScript or a <link>, not with an @import inside the Tailwind stylesheet: the Tailwind CLI inlines an imported file without rewriting its font URLs, and the fonts would not load.

Use a component

import { Badge, Button, Field, Input } from "@oprt/react";

export function Handover() {
  return (
    <form>
      <Field label="Callsign" required>
        <Input placeholder="RAVEN 2" />
      </Field>
      <Badge variant="warning">Stale</Badge>
      <Button type="submit">Acknowledge</Button>
    </form>
  );
}

Each page in Components shows a component's variants live, with its props, its accessibility behavior and its manifest entry.

Optional packages

Or copy the source

To own the code instead of installing the components, the command line copies any component or working screen into your project, with every file it depends on:

npx @oprt/cli add button --out src/operator
npx @oprt/cli add asset-management --out src/operator --dry-run

It prints the packages the copied source needs. Copied components still use the tokens and the Tailwind plugin; Tailwind 4 scans source inside your project on its own, so add an @source line only for a folder outside it. See the CLI guide.

Set up a coding agent

npx @oprt/cli init --agent claude

This writes OPERATOR's instructions into CLAUDE.md. Without --agent it writes AGENTS.md; --agent cursor writes Cursor's rules. See Agents.

Troubleshooting

• The components look unstyled. Tailwind is not scanning them. Check that the @source path is relative to your stylesheet and points at node_modules/@oprt/react/dist.
• Text falls back to another font. The tokens were imported with @import inside the Tailwind stylesheet. Import them from JavaScript instead.
• Headings or tables inside a component change in long-form content. Tailwind Typography's prose styles reach into components. Wrap them in an element with the not-prose class.