Introduction
Monochrome is an accessible, headless UI library for any project. Keyboard navigation, ARIA support, and focus management ship as vanilla JavaScript. The package is monochrome v0.11.0, MIT licensed, and targets Baseline 2024 browsers.
The Problem
Building accessible interactive components is hard. They need the right ARIA attributes, keyboard navigation, focus management, and screen reader support. Each pattern has its own conventions, and getting them right takes time and expertise.
Libraries like Base UI and React Aria solve this well. They handle the complexity so you do not have to. The tradeoff is runtime: they need a specific framework on the client to manage state and render updates.
Not every project needs a client-side framework. Static sites, server-rendered pages, content-heavy apps. Sometimes you want the HTML you wrote to become interactive. Load a script, and it works. That is what monochrome does.
The Solution
Monochrome is HTML-first and headless. You write (or generate) semantic markup with the right IDs and ARIA attributes. The runtime never owns a parallel state tree. The DOM is the state: aria-expanded, aria-hidden, and related attributes are both the accessibility contract and the source of truth.
A page with a thousand interactive elements has the same listener footprint as a page with one. The core shares a small set of delegated event listeners across every component. There are no instances and no per-component overhead.
Components are inherently dynamic. Anything added to the page works the moment it appears in the DOM, because the library responds to interactions as they happen, not to components registered at startup. Nothing to initialize, nothing to clean up.
Who It Is For
- Teams shipping static or server-rendered HTML who still need WAI-ARIA patterns
- Projects that want framework wrappers as optional markup helpers, not as the behavior layer
- Anyone who prefers inspecting the elements panel over debugging a mirrored state store
If you need highly configurable behavior APIs or legacy browser support, a framework-based library is a better fit. If you want correct, accessible components with a minimal footprint, monochrome is built for that.
What's in the Box
Eight interactive UI patterns:
| Component | Purpose |
|---|---|
| Accordion | Grouped collapsible content sections |
| Collapsible | Show and hide content with a button |
| Dialog | Modal dialog on the native <dialog> element |
| Menu | Dropdown menus with submenus and selection items |
| Menubar | Horizontal bar of menus, like an application menu |
| Popover | Contextual panels anchored to a trigger |
| Tabs | Switch between multiple content panels |
| Tooltip | Non-interactive description on hover or focus |
Plus an optional Router for SPA-style navigation, and optional React and Vue wrappers that only generate markup. All interactivity comes from the core runtime.
Frequently Asked Questions
Does it support Tailwind CSS styling?
Yes. Tailwind, CSS modules, BEM, and vanilla CSS all work. Components output semantic HTML with no required classes. Style them however you prefer.
Does it work with React and Vue?
Yes. Optional React and Vue wrappers generate the HTML structure automatically. Or use the HTML API directly with any framework's templating.
Does it support Next.js and Astro?
Yes. Any stack that outputs HTML works: Next.js, Astro, Nuxt, Remix, SvelteKit, or plain HTML. It also works with non-JS backends like Laravel, Rails, and WordPress.
How do I load it?
Install the monochrome package and import it once, or load it from a CDN. See Installation and the CDN how-to.
Are the components WCAG compliant?
Yes. Patterns follow WAI-ARIA Authoring Practices, with keyboard navigation and focus management built in. Interaction and axe checks run in Playwright against HTML, React, and Vue. Your own styles and surrounding page still need a normal accessibility pass.
What browsers are officially supported?
Chrome, Edge, Firefox, and Safari on desktop and mobile, from Baseline 2024 onward. The newest platform feature the library relies on is the Popover API. See Browser Support for exact versions.
Is the library open source and MIT licensed?
Yes. MIT licensed and free for personal and commercial use.
Next Steps
- Quick start: get a working collapsible or accordion on the page
- Architecture: why DOM-as-state and event delegation look the way they do
- Reference: component contracts and markup