Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
The System-level application wrapper is the single source of truth for Opus styles, theme, font, and portalled UI. The preview and Usage panel demonstrate the same wrapper—there is no unrelated drawer demo.
Space Grotesk remains the recommended default. Load it with next/font/google, then pass its CSS stack to ThemeProvider through fontFamily. The provider publishes that value as --opus-font-family, so every Opus component and portalled overlay inherits it.
The font picker in each component Preview is intentionally independent of the catalogue font picker. It lets consumers audition Google Fonts without recolouring or reflowing the documentation shell.
opus-react/styles.css and opus-react/index.css in app/layout.tsx.next/font/google.data-theme on <html> to avoid a theme flash.{children} in an OpusAppShell client component using ThemeProvider and optional PortalHost.ThemeProvider fontFamily.Drawers, dialogs, modals, dropdowns, tooltips, context menus, and other overlays inherit the document-level theme and font tokens. Use the standalone Portal utility only for custom overlays.
| Prop | Type | Default | Description |
|---|---|---|---|
accent | string | #8f6cff | Configures accent. |
accentSecondary | string | #0284c7 | Configures accent secondary. |
baseColor | string | #64748b | Configures base color. |
fontFamily | string | Space Grotesk | Configures font family. |
theme | string | dark | Configures theme. |
tileAccent | string | #ec4899 | Configures tile accent. |
tileAccentSecondary | string | #0ea5e9 | Configures tile accent secondary. |