A flexible modal dialog component with transition effects and slot-based content

Basic Usage

Custom Content

• Base styling with Tailwind:
  Core Structure

  .modal-overlay {
    @apply fixed inset-0 flex items-center justify-center bg-white/75 z-50;
  }
  
  .modal-container {
    @apply bg-white rounded-xl p-6 shadow-lg max-w-md border-2 border-primary-light-500;
  }
  

• Transition effects:
  Fade Animation

  .fade-modal-enter-active,
  .fade-modal-leave-active {
    @apply transition-opacity duration-300;
  }
  
  .fade-modal-enter-from,
  .fade-modal-leave-to {
    @apply opacity-0;
  }