Monochrome

Accessible UI component library. Best-in-class performance. HTML-first, React and Vue supported.

If you write accessible HTML, monochrome makes it interactive. The DOM is the state; ARIA attributes (aria-expanded, aria-selected, aria-checked) drive every component. No initialization, no mount hooks.

Components

Accordion · Collapsible · Dialog · Menu · Menubar · Popover · Tabs · Tooltip.

Plus an optional client-side router and thin React and Vue wrappers.

Install

npm install monochrome

// core runtime
import "monochrome"

// optional router
import "monochrome/router"

// React wrappers
import { Accordion } from "monochrome/react"

// Vue wrappers
import { Accordion } from "monochrome/vue"

Example

<script type="module" src="https://esm.sh/monochrome"></script>

<button id="mct:collapsible:1" aria-expanded="false" aria-controls="mcc:collapsible:1">
  Show details
</button>
<div id="mcc:collapsible:1" aria-labelledby="mct:collapsible:1" aria-hidden="true" hidden>
  Hidden by default, revealed on click.
</div>

The React and Vue wrappers generate the same HTML and ARIA; all interactivity comes from the core.

Browser support

Baseline 2024. Uses the Popover API and the native <dialog> element. No polyfills shipped.

Contributing

See AGENTS.md for architecture, invariants, and code style.

License

MIT © Colin van Eenige