Skip to main content

Home Guide Components Playground Version

opus-react v0.6.8

Theme

Overview Relationships

Alert Avatar Avatar group Badge Card Clock Content timeline Description list Divider Empty state Flip Clock JSON viewer List Masonry grid Panel Property grid Section Show more Skeleton Statistic Tree menu Tree view

3D asset gallery 3D asset lightbox 3D asset thumbnail 3D asset viewer

Accordion Accordion group

Dual List Builder Filter Builder Permissions Matrix Property Inspector Query Builder Rule Builder

Data grid Table

Desktop Desktop Dock Desktop Icon Desktop Window

Carousel Image gallery Image thumbnail Lightbox

Aspect Ratio Columns Container Custom Scrollbar Dock Layout Grid Resizable Panel Resize Handle Scroll Area Spacer Splitter Stack Three Pane Layout

Audio Player Video Player

Bottom Navigation Breadcrumb Dock / Toolbar Dropdown menu FAB Mega menu Navigation Rail Page Header Pagination Sidebar Split Button Tabs Top navigation

Calendar Kanban Board Resource Planner Scheduler

Stat Tile Stat Tiles Tile Tiles

Clipboard Copy button Focus trap Hotkey manager Icon Icon badge Intersection observer Keyboard shortcut Portal Portal host Resize observer Spinner Theme provider Theme switcher Visually hidden

Dashboard Content Container Deals Over Time Gauge KPI Card Metric Tile Pipeline Overview Profile Photo Upload Progress Bar Progress Ring Recent Activity Sparkline Speedometer Stat Card Status Indicator Top Performing People Trend Badge Upcoming Tasks User Profile

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

100% Stacked Bar Chart Bar Chart (Horizontal)Bar Chart (Vertical)Bullet Chart Grouped Bar Chart Pareto Chart Range Bar Chart Stacked Bar Chart

Financial Charts

Candlestick Chart OHLC Chart Waterfall Chart

Chord Diagram Force Directed Graph Funnel Chart Network Graph Pyramid Chart Sankey Diagram

Hierarchy Charts

Circle Packing Treemap

Area Chart Line Chart Multi-Line Chart Range Area Chart Ridgeline Plot Spline (Smooth Line)Stacked Area Chart Stream Graph

Bubble Map Choropleth Map Geo Map

Calendar Heatmap Contour Plot Heatmap Surface Plot (2D projection)

Planning Charts

Gantt Chart Milestone Timeline Timeline

Bubble Chart Hexbin Plot Scatter Plot

Donut Chart Pie Chart Polar Area Chart Radar Chart Sunburst Chart

Statistical Charts

Box Plot Density Plot Error Bar Chart Histogram Parallel Coordinates Violin Plot

Command palette Context menu Dialog Drawer Modal Popover Toast Tooltip

Application Footer Application Header Notes & Activity Notification Centre Sidebar User Profile

Change Password Form Check Email Screen Email Verified Screen Forgot Password Form Google & Apple Login Form Google & Apple Registration Form Link Expired Screen Login Form OTP Form Passkey Login Form Register Form Reset Password Form

Appointment Diary

Company Card Company Details Company Directory Company Notes

Contact Card Contact Details Contact Directory Contact Notes

Dashboard Layout Dashboard List Columns Dashboard Welcome

Desktop Environment*

Document Manager

Form Submission

Product Catalogue

Quotation Builder Sales Invoice Sales Opportunity Pipeline Sales Order

System Configuration

403 Page 404 Page App setup

Opus
Documentation
Components
System
App setup

Components

Loading preview…

Preview

Preview theme

Preview theme

Open in Playground

Waiting for action

Usage

Open in Playground

Copy this complete component into a page file. Edit and run it in the Playground.

Loading editor…

Documentation

Overview

Runnable app shell wiring with ThemeProvider, PortalHost, and a drawer demo. Usage and Playground show the same source.

When to use

Bootstrapping a new app that consumes opus-react.
Ensuring portalled overlays (drawers, modals, dropdowns) inherit theme tokens.

Production Next.js setup

Drop the Usage/Playground component into app/page.tsx, then add global styles and fonts in app/layout.tsx:

Import opus-react/styles.css and opus-react/index.css.
Set data-theme on <html>.
Wrap {children} in your own OpusAppShell client component (ThemeProvider + optional PortalHost).

Portalled components

These render outside the React parent tree automatically — no manual <Portal> wrapper required in usage code:

Full-screen overlays: Drawer, Dialog, Modal, Command palette, Lightbox, Model lightbox
Floating UI: Dropdown menu, Mega menu, Tooltip, Context menu, Emoji picker

Use the standalone Portal utility when building custom overlays.

Related

Theme provider
Portal host