Installation

Add monochrome to your project and start building accessible components in minutes.

Package Manager

bun add monochrome

npm install monochrome

pnpm add monochrome

yarn add monochrome

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

import "monochrome"

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

CDN

For projects without a build step, add a single script tag:

<script defer src="https://unpkg.com/monochrome"></script>

Ideal for PHP, Rails, Django, WordPress, or static HTML.

Your First Component

Once installed, write the HTML structure with the correct IDs and ARIA attributes. Here's a collapsible:

<button
  id="mct:collapsible:demo"
  aria-expanded="false"
  aria-controls="mcc:collapsible:demo"
>
  Show content
</button>
<div
  id="mcc:collapsible:demo"
  aria-labelledby="mct:collapsible:demo"
  aria-hidden="true"
  hidden="until-found"
>
  This content toggles when you click the button.
</div>

The ID prefixes tell monochrome which elements to coordinate:

Each component's documentation explains which elements need which prefixes.

React

Optional React components generate the HTML structure and IDs automatically. They are pure templates with no client-side logic. All interactivity comes from the monochrome runtime.

import { Collapsible } from "monochrome/react"

export function Demo() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Show content</Collapsible.Trigger>
      <Collapsible.Panel>
        This content toggles when you click the button.
      </Collapsible.Panel>
    </Collapsible.Root>
  )
}

See the React guide for setup, available components, and how to use them with zero client-side React.

What's Included

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

Next Steps