@oprt/react

React components for operational interfaces: command, control and industrial software. Part of the OPERATOR design system.

75 component families, from Button and DataGrid to OperationalStatus, Inspector and MapControls, with interactive behavior from React Aria. Every component is dark, square-cornered and keyboard operable, and spells its status out instead of relying on color alone, so dense, fast-changing screens stay readable.

Install

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

React 18 or later and React DOM are peer dependencies. The components are styled with Tailwind CSS 4 and the OPERATOR plugin. Set Tailwind up the way your framework does, then add the plugin and the components to the stylesheet where Tailwind is imported:

/* app/globals.css */
@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 once at the application root, before that stylesheet:

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 bundled fonts would not load. Inside Tailwind Typography's prose, wrap components in an element with the not-prose class.

Use

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>
  );
}

Every component's page at oprt.dev/docs/components shows its variants live, with its props, its accessibility behavior and its manifest entry. Six complete working screens are at oprt.dev.

What's included

• Actions and inputs: Button, ButtonGroup, CopyButton, Field, Input, Textarea, NumberInput, CoordinateInput, Checkbox, RadioGroup, Toggle, Slider, Select, ComboBox, MultiSelect, TagGroup, InlineEdit, FormSection, FormErrorSummary
• Dates and times: Calendar, DatePicker, DateRangePicker, DateTimePicker, TimeField, TimeRange
• Data: DataTable, DataGrid, Chart, Sparkline, StatCard, EventTimeline, DescriptionList, FilterBar, PropertyFilter
• Status and feedback: Badge, Alert, Toast, Progress, Skeleton, OperationalStatus, ActionStatus, JobStatus, CollectionState
• Bulk work and files: BulkActionBar, BulkResults, FileUpload, UploadQueue, AttachmentPreview
• Layout and navigation: AppShell, Sidebar, SplitPane, Tabs, Breadcrumb, Toolbar, Collapsible, TreeView, Card, Divider, Link, Avatar
• Overlays and inspection: Dialog, ConfirmDialog, Popover, Tooltip, DropdownMenu, ContextMenu, CommandPalette, Inspector, EntityPreview
• Maps and media: MapControls, LayerControl, MapLegend, MapScale, MediaFrame, PlaybackControls

Motion is tactile and quick. Turn it off for one component with motion="none"; the system's reduced-motion setting turns it off everywhere.

Server Components and bundle size

Each module is its own file, and only the modules that need the browser are marked "use client". An app pays only for what it imports, and a Server Component can import the manifest entries and data helpers from the package root. ES modules and CommonJS are both included.

For coding agents

Each family exports its manifest entry (ButtonManifest, DataGridManifest and so on). In development, an invalid option value logs a structured INVALID_PROP_VALUE error with the valid values and a suggestion; production builds leave it out. For the whole contract, give an agent @oprt/manifest's components.json, or use @oprt/cli to write the agent's instructions and check its code. See oprt.dev/docs/agents.

To own the code instead of installing it, the CLI copies any component, with everything it depends on, into your project: npx @oprt/cli add button.

License

MIT. The OPERATOR fonts in @oprt/tokens are under the SIL Open Font License 1.1.