This component is a Javascript and CSS only component, which means you will need to attach it to a component of your choice where you want to enable micromodal on.

An example

Let's use micromodal on node--arcticle component.

First add the micromodal library before the node--article library on node--article.html.twig:

{% extends 'node.html.twig' %}

{% block before %}
  {{ attach_library("compony/micromodal") }}
  {{ attach_library("compony/node--article") }}
{% endblock %}

{% block content %}
  {{ content }}
{% endblock %}

Next, we need to add a toggle to open the micromodal (.my-toggle) and the semantics that is the micromodal itself (.my-modal):

{% extends 'node.html.twig' %}

{% block before %}
  {{ attach_library("compony/micromodal") }}
  {{ attach_library("compony/node--article") }}
{% endblock %}

{% block content %}
  {{ content }}
  
  <button class="my-toggle">click me!</button>

  <div class="modal micromodal-slide" id="my-modal" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
        <header class="modal__header">
          <button class="modal--custom__close" aria-label="Close modal" data-micromodal-close>
            <svg class="modal--custom__close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.239 174.239">
              <path d="M87.12 0C39.082 0 0 39.082 0 87.12s39.082 87.12 87.12 87.12 87.12-39.082 87.12-87.12S135.157 0 87.12 0zm0 159.305c-39.802 0-72.185-32.383-72.185-72.185S47.318 14.935 87.12 14.935s72.185 32.383 72.185 72.185-32.384 72.185-72.185 72.185z"/>
              <path d="M120.83 53.414c-2.917-2.917-7.647-2.917-10.559 0L87.12 76.568 63.969 53.414c-2.917-2.917-7.642-2.917-10.559 0s-2.917 7.642 0 10.559l23.151 23.153-23.152 23.154a7.464 7.464 0 0 0 0 10.559 7.445 7.445 0 0 0 5.28 2.188 7.437 7.437 0 0 0 5.28-2.188L87.12 97.686l23.151 23.153a7.445 7.445 0 0 0 5.28 2.188 7.442 7.442 0 0 0 5.28-2.188 7.464 7.464 0 0 0 0-10.559L97.679 87.127l23.151-23.153a7.465 7.465 0 0 0 0-10.56z"/>
            </svg>
          </button>
        </header>

        <main class="modal__content" id="modal-1-content">
          {{ create_collection_form }}
        </main>
      </div>
    </div>
  </div>
{% endblock %}

As the last step we now need to make the toggle open the micromodal when clicked. So inside node--article.js we write:

// Initialise MicroModal;
MicroModal.init();

var $myToggle = document.querySelector('.my-toggle');
$myToggle.addEventListener('click', function(e) {
  // Show MicroModal;
  MicroModal.show('my-modal');
});