monochrome-ui

CDN / plain HTML

Load monochrome without a build step. A deferred script tag registers the same runtime as the package import.

When to Use the CDN

Use the CDN when you have no bundler, or when a backend (PHP, Rails, Django, WordPress, static HTML) already renders the page. Prefer the package install when you already have a JavaScript toolchain.

Add the Script

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

defer keeps parsing non-blocking and runs the script after the document is parsed, so markup is ready when listeners attach.

Plain HTML Example

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Monochrome CDN</title>
    <script defer src="https://unpkg.com/monochrome"></script>
  </head>
  <body>
    <button
      type="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
    >
      This content toggles when you click the button.
    </div>
  </body>
</html>

Open the file in a browser. Click the button or activate it with Enter or Space after focusing it. The panel should toggle.

Pin a version in production if you need a fixed build, for example https://unpkg.com/monochrome@0.11.0.

Next Steps