Opus
Get started

React 19 design system for business apps

Ship polished internal tools without rebuilding the foundations.

Opus is a themeable component library for CRM, operations, and admin products—forms, dashboards, overlays, and application shells that already work together.

Explore componentsTry the Playground

New in Opus 0.20.3: what changed in the latest release →

npm install opus-react
308 catalogue entriesMIT licensedInstall from npm

Interactive 3D asset

Loading Opus 3D mark…

Drag to explore the Opus mark.

Built for teams shipping internal tools, CRM, and operations apps—not another kit of unstyled primitives.

308Documented components
270Browser interaction checks
npmPublished as opus-react

How Opus ships

The package is consumed, so the release writes itself.

Every version is published to npm, installed into this application, and used to build the screens on this site. Whatever reads wrong in that product becomes the next release — 0.17.1 exists because a real Data Grid sorted pills by their markup instead of their labels.

Read the 0.17.1 story

  1. Published to npm

    The library leaves as a versioned package, not a local branch.

  2. Installed by the app

    The application upgrades on release and runs the package in real screens.

  3. Raised as a change

    What consumption finds becomes the next version's notes.

Real-world compositions

Production UI, not placeholder blocks.

These are live Opus components from the npm package—the same contact and dashboard patterns available in the catalogue and editable Playground.

Live component composition
opus-react

Emma Winterhold-Smith

Head of Procurement

  • Acme LtdPrimary
  • Northstar HoldingsProcurement Advisor
Active
Phone+44 20 7946 0958
Mobile+44 7700 900123
Emailemma.davis@acme.com
Websitewww.acme.com
CompaniesAcme Ltd · PrimaryNorthstar Holdings
Job TitleHead of Procurement
DepartmentProcurement
RoleDecision Maker
IndustryManufacturing
Employees1,001 – 5,000
Owner Carl Fearby
SourceLinkedIn
Lead StatusOpportunity
Last Contact7 May 2025
TagsProcurementROI FocusedStrategic
Loading pipeline preview…
Loading deals preview…
Contact card Pipeline overview Deals over time

Why Opus

Everything you need to design, build, and ship consistent interfaces.

Opus is both a component library and a documented system. Use the primitives directly in production, or browse the catalogue to validate patterns before you wire them into your product.

Forms that feel finished

Text inputs, pickers, multi-selects, cascaders, rich text, password strength, and more — all wrapped in a consistent field shell with labels, help, and errors.

Design themes visually

Use the Theme Designer to set light or dark mode, fonts, radius, surface treatments, primary/secondary/tertiary accents, and tile gradients. Switch every live preview between desktop and mobile, then copy provider-ready code into your app.

Built for product teams

Live previews, settings panels, generated usage code, and Open in Playground links make it easy to explore components before you commit them to a screen.

Mapped component relationships

The catalogue shows which public components are composed from others, making it easier to choose primitives, reuse patterns, and review dependency impact.

Preview at real widths

Raw previews include full width, desktop, tablet, mobile, and fixed canvas sizes so layout decisions can be checked before a component reaches an app.

ChatGPT with real UI context

Bring your own OpenAI API key. ChatGPT receives the current component source, generated example, theme, and preview errors so it can diagnose and reshape the UI without a lengthy setup prompt.

Verified beyond a screenshot

Interactive examples are exercised in a real browser for callbacks, navigation, value changes, visible state, and drag gestures. Presentational components receive explicit render coverage.

Overlays and navigation

Dialogs, drawers, modals, popovers, toasts, sidebars, and top navigation — composed to work together across complex application shells.

Data-rich UI

Tables, charts, KPI cards, gauges, sparklines, and status indicators for dashboards that need more than a form on a blank page.

Auth happy path

Login, register, Google and Apple continue, OTP, passkeys, forgot and reset password, check-email, verified, and expired-link screens — composed from the same field and button primitives as the rest of Opus.

Application-ready labs

CRM workspaces, authentication journeys, desktop environments, document managers, contact records, sales flows, maps, and media experiences — composed from the same published primitives.

Published for real apps

Install opus-react from npm, import the styles once, and drop components into Next.js, Vite, or any React 19 project.

New in Opus 0.7 · Visual theme designer

Build a complete theme visually. Use it everywhere.

Set colours, tile gradients, typography, radius, surface treatment, and light or dark mode in one live workspace. Opus turns those choices into a provider-ready theme that applies across your application while individual components can still opt out.

  • Live component canvas with controls, tiles, widgets, forms, and actions.
  • Primary, secondary, tertiary, and tile accent tokens with light and dark previews.
  • Desktop and mobile preview modes, plus copy-ready provider code for your parent application.
Light theme

Shared theme

Visual system refresh
Ready for review
Coverage94%
Components308
Dark theme

Shared theme

Visual system refresh
Ready for review
Coverage94%
Components308

Built for the work after the demo

A system for complete product surfaces.

Opus brings the small interaction details, complex data views, and full application patterns into one documented component system—so teams can spend their time shaping the product instead of rebuilding its foundations.

Foundation

Start with the details users notice.

Use fields, validation states, labels, help text, actions, and feedback patterns that behave as one system instead of a collection of one-off controls.

Explore form components

Data workflows

Make dense information easier to act on.

Build operational screens from tables, charts, metrics, filters, status signals, and responsive dashboard patterns that support real decisions.

Explore dashboard components

Application patterns

Move beyond isolated component demos.

Inspect complete workspace, desktop, authentication, CRM, media, and document experiences built by composing the same published primitives.

Open the Desktop Environment lab

Confidence

Check the behaviour before it reaches your app.

Tune live settings, inspect generated JSX, review component relationships, and test a component at the widths and themes your product needs.

Open an interactive component page

Desktop applications

Build a complete workspace in the browser.

Compose desktop-style products from the same accessible, typed React primitives as the rest of Opus. You define the apps and content; Opus provides the polished workspace and interaction model.

  • Draggable, resizable, focus-aware application windows
  • Desktop shortcuts and a resizable, auto-hiding dock
  • Minimise, maximise, restore, and application callbacks
  • User-defined React content for every window and app
Explore desktop components
Opus browser desktop with draggable application windows, shortcuts, and dock

AI-assisted Code Playground

Give ChatGPT the working component—not an empty prompt.

Open a catalogue example and ChatGPT can work from the generated JSX, your edits, the active theme, and any runtime preview error—all beside the live result.

Bring your own OpenAI API key. It stays in your browser for Playground sessions, so you control the account and usage behind every request.

  • Open any catalogue component with its generated JSX and current settings already loaded
  • Give ChatGPT the current source, component context, selected theme, and live preview error
  • Ask AI to explain, diagnose, adapt, or return corrected production-ready source
  • Edit the answer and see the preview update immediately in the same workspace
  • Use your own OpenAI API key instead of relying on a shared AI account
Open the PlaygroundBrowse the catalogue

Component library

Every component. One coherent system.

Explore all 308 documented primitives, visualisations, application patterns, and complete compositions available in Opus today.

Open the full catalogue

Content

114

Expandable sections, grouped accordions, alerts, navigation menus, empty states, sidebars, and show more / show less controls.

Browse content

Components

3D Assets

Accordion

Builders

Content

Data

Desktop

Developer

Feedback

Images

Layout

Maps

Media

Navigation

Planning

Tiles

Typography

Utilities

Forms

63

Inputs, selectors, toggles, buttons, and every field pattern used across Opus forms.

Browse forms

Components

Graphs

51

Charts and visualisations for comparing, trending, segmenting, and exploring metric data.

Browse graphs

Bar Charts

Financial Charts

Flow Charts

Hierarchy Charts

Line Charts

Maps

Matrix Charts

Planning Charts

Point Charts

Radial Charts

Statistical Charts

Labs

43

Experimental compositions that combine multiple library components into ready-made patterns — including CRM workspaces and a full authentication happy path.

Browse labs

Application

Authentication

Calendar

Companies

Contacts

Dashboard

Desktop

Documents

Forms

Inventory

Products

Sales

Settings

Tasks

Questions, answered

A component library that meets teams where they build.

Browse the form system, explore data-rich UI, or start with the Desktop Environment lab.

What is Opus?
Opus is a React component library and documented design system for modern business applications. It combines production components, live previews, generated usage examples, and complete application patterns.
Can I use Opus with an existing React application?
Yes. Install the published opus-react package, import the stylesheet once, and compose the components in Next.js, Vite, or another React application. The catalogue provides the public API and working examples for each component.
Does Opus support light and dark themes?
Yes. Opus supports light and dark presentation modes, runtime accent colours, and responsive previews so teams can check a component in the visual contexts their product needs.
Are there components for data-heavy business applications?
Yes. Opus includes dashboard, chart, table, status, filtering, form, overlay, navigation, and workspace patterns designed for operational products—not just landing pages.
How can I evaluate a component before adding it to my product?
Open its catalogue page to adjust settings, inspect generated JSX, explore relationships, and move the example into the Playground. The Playground can also use your own OpenAI API key for context-aware UI help.

Workflow

From npm install to production UI in four steps.

01

Install the package

Add opus-react to your app and import the base styles once in your root layout.

02

Wrap with theme context

Use OpusThemeProvider to enable light or dark mode and runtime accent colours.

03

Compose screens

Drop in field components, overlays, and layout primitives with consistent spacing and states.

04

Experiment in the Playground

Open any component page, tune its settings, and edit the generated JSX live. Optionally add your own OpenAI API key and ask ChatGPT to diagnose, explain, or reshape the current example before you paste it into your app.

import "opus-react/styles.css";
import "opus-react/index.css";
import { OpusThemeProvider, Button, TextField } from "opus-react";

export function App() {
  return (
    <OpusThemeProvider theme="dark">
      <TextField label="Company" placeholder="Acme Ltd" />
      <Button variant="primary">Continue</Button>
    </OpusThemeProvider>
  );
}

Why Opus

Built in the open, because useful work should last.

Opus is Carl Fearby’s way of sharing decades of interface work with the wider web community—free to use, open to critique, and made without a commercial agenda.Read why Opus exists

Help build Opus

We’re looking for contributors.

Join us in building an accessible, dependable component system for modern business applications. Small fixes, focused components, tests, examples, and documentation are every bit as valuable as larger features.

  • Component design
  • Accessibility
  • Interaction testing
  • Documentation
  • Dashboard patterns
  • Web and desktop apps
  • Translation proofreading

Ready when you are

Start with Opus today.

Install the package, browse the catalogue, then try a component in the Playground.

Explore componentsOpen Playgroundnpm package