Monochrome UI
Accessible, headless UI components. Four components — Accordion, Collapsible, Menu, Tabs — powered by a 2.2kB core with zero dependencies.Installation
Get started with npm, yarn, pnpm, or bun in seconds
Quick Start
Build your first accordion in under 2 minutes
Components
Accordion, Collapsible, Menu, and Tabs with full keyboard support
Accessibility
WCAG 2.2 AA compliant with WAI-ARIA best practices
What makes Monochrome different?
HTML-first architecture Monochrome uses the DOM as its source of truth. Instead of managing state in JavaScript, it reads ARIA attributes, responds to user interactions, and updates them directly. Import the core once and every component on the page works automatically. Framework-agnostic core The core uses event delegation and minimal global event listeners to handle all interactions. React and Vue wrappers are included, but you can use plain HTML with any framework that outputs HTML. Best-in-class performance- 2.2kB gzipped — entire library including all four components
- Zero dependencies — no runtime dependencies
- No initialization — components activate automatically
- No timers — all behavior is synchronous
- Event delegation — 6 global listeners handle everything
Features
Accessible
Full keyboard navigation with arrow keys, Home, End, Enter, Space, and Escape. Automatic ARIA attribute management and screen reader support.
Headless
No CSS shipped. You have complete control over styling. All components are unstyled by default.
Tested
354 passing tests across HTML, React, and Vue renderers. Every component follows WAI-ARIA Authoring Practices.
Browser Requirements
Monochrome requires Baseline 2024 features and supports all modern browsers:- Popover API — for menu positioning
hidden="until-found"— preserves browser find-in-page (Cmd+F / Ctrl+F)beforematchevent — auto-opens components when find-in-page reveals hidden content
Components
| Component | Description | Tests |
|---|---|---|
| Accordion | Grouped collapsible content sections | 66 |
| Collapsible | Show and hide content with a button | 42 |
| Menu | Dropdown menus, menubars, and submenus | 176 |
| Tabs | Switch between multiple content panels | 70 |
Next steps
Install Monochrome
Add Monochrome to your project with your favorite package manager
Build your first component
Follow the quick start guide to create a working accordion