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 system · React 19 · npm · browser verified
Ship polished business apps with a component library built for real workflows.
Opus brings together forms, overlays, navigation, charts, application shells, desktop primitives, and production-ready compositions in one themeable system — with live documentation, editable previews, and usage examples verified against the real package.
267Audited live examples
270Browser interaction checks
276Unit assertions
npmPublished as opus-react
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.
Themeable from day one
Light and dark modes ship out of the box. Accent colours can be changed at runtime without rebuilding your theme tokens.
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.
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.
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
Code Playground
Explore components in a live editor, not just a static catalogue.
Jump from any component page into the Playground with generated JSX for your current settings, then tweak imports, state, and render logic before you paste it into your app. The same source is compiled for the catalogue preview, Playground, and external view, so the example you inspect is the example you run.
- Edit complete component examples with syntax highlighting
- Live preview updates as you type
- Open in Playground from any component page with your current settings
- Preview, Playground, and external windows use the same generated source
- Resizable source and preview panes powered by Splitter
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
Carl FearbySourceLinkedIn
Lead StatusOpportunity
Last Contact7 May 2025
Tags
Loading pipeline preview…
Loading deals preview…
Component library
Every component. One coherent system.
Explore all 269 documented primitives, visualisations, application patterns, and complete compositions available in Opus today.
Content
Expandable sections, grouped accordions, alerts, navigation menus, empty states, sidebars, and show more / show less controls.
Accordion
Builders
Layout
Maps
Navigation
Dashboard
Dashboard widgets, metric cards, progress components, profile panels, and data-rich summary blocks.
Browse dashboard
Forms
Inputs, selectors, toggles, buttons, and every field pattern used across Opus forms.
- Accent colour picker
- Button
- Cascader
- Checkbox
- Checkbox group
- Chip input
- Choice chips
- Colour clouds
- Colour picker
- Combobox
- Country picker
- Currency input
- Date picker
- Date range picker
- Date/time picker
- Email input
- Emoji picker
- File upload
- Filter select
- Form & validation summary
- Hidden input
- Icon picker
- Image crop upload
- Masked input
- Month picker
- Multi select
- Multi-file upload
- Note composer
- Number input
- OTP input
- Password input
- Password strength field
- Phone number input
- Radio group
- Range slider
- Rating input
- Reset button
- Rich text field
- Search input
- Segmented control
- Select
- Slider range
- Submit button
- Switch
- Text input
- Textarea
- Theme toggle
- Time picker
- Transfer list
- Tree select
- URL input
- Week picker
Graphs
Charts and visualisations for comparing, trending, segmenting, and exploring metric data.
Bar Charts
Financial Charts
Hierarchy Charts
Line Charts
Planning Charts
Point Charts
Labs
Experimental compositions that combine multiple library components into ready-made patterns — including CRM workspaces and a full authentication happy path.
Application
Authentication
Calendar
Desktop
Documents
Forms
Inventory
Products
Settings
Tasks
Overlays
Tooltips, command palettes, modals, drawers, and toast notifications for contextual help and feedback.
System
Application shells, setup boilerplates, and route-level pages such as error and access-denied states.
Workflow
From npm install to production UI in four steps.
Install the package
Add `opus-react` to your app and import the base styles once in your root layout.
Wrap with theme context
Use `OpusThemeProvider` to enable light or dark mode and runtime accent colours.
Compose screens
Drop in field components, overlays, and layout primitives with consistent spacing and states.
Experiment in the Playground
Open any component page, tune settings, then click Open in Playground to edit the generated JSX and preview it live 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>
);
}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
Ready when you are
Start with Opus today.
Install the library, browse the documentation, and experiment in the Playground before you bring a cohesive design system to your next product surface.