How To

Code Snippets & How To

Ready-to-use code snippets for common UI components and interactions.

UI Components

How To Create a Modal

A responsive modal dialog with backdrop, close button, keyboard support, and smooth animations.

<button id="openModal" class="btn">Open Modal</button>

<div id="modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <div class="modal-content">
    <div class="modal-header">
      <h2 id="modalTitle">Modal Title</h2>
      <button id="closeModal" class="close-btn" aria-label="Close modal">&times;</button>
    </div>
    <div class="modal-body">
      <p>This is the modal content. Click outside or press Escape to close.</p>
    </div>
    <div class="modal-footer">
      <button id="cancelModal" class="btn btn-secondary">Cancel</button>
      <button class="btn btn-primary">Confirm</button>
    </div>
  </div>
</div>

Preview