monochrome-ui

Installation

Add monochrome v0.11.0 to your project. One import registers the runtime for every correctly structured component on the page.

Install

shellscript
npm install monochrome

Import the runtime once in your app's entry point:

javascript
import "monochrome"

This single import registers event listeners that handle all component interactions through event delegation. No initialization function, no configuration, no framework integration.

For a first working component, follow the Quick start. For projects without a build step, see the CDN how-to.

What's Included

Export Description
monochrome Runtime that handles interactions
@monochrome-ui/router Optional client-side router
@monochrome-ui/react Optional React wrappers for all eight patterns
@monochrome-ui/vue Optional Vue wrappers for all eight patterns

No CSS is included. Components render semantic HTML that you style with your preferred approach. The package is MIT licensed.

ID Prefixes

Triggers, content, and roots use mct: / mcc: / mcr: id prefixes. See Conventions for the full table and linking rules.

Framework Wrappers

Optional React and Vue wrappers generate IDs and ARIA attributes for you. They are pure markup generators; all interactivity comes from the core runtime. See Frameworks.

Browser Support

Monochrome targets Baseline 2024: the set of features available in all four major browser engines since April 2024. No polyfills are shipped. The core relies on three platform features that are newer than the rest:

Feature Used for Chrome / Edge Firefox Safari
Popover API Menu, Popover, and Tooltip render in the top layer via showPopover() 114 125 17
ARIA attribute reflection Every state read and write (ariaExpanded, ariaSelected, ...) 81 119 12.1
<dialog> element Dialog opens as a true modal via showModal() 37 98 15.4

The Popover API is the limiting feature: it completed Baseline in April 2024 when Firefox 125 shipped it. Everything else the library touches (event delegation, CSS custom properties, the History API) has been supported for years.

If you animate open and close states with CSS, @starting-style is the modern way to transition popovers in. It is newer than the library's own requirements (Chrome 117, Firefox 129, Safari 17.5) but degrades gracefully: without it, popovers appear instantly instead of animating.

Next Steps