Reusable Dialog Modal Component (modal/modal.tsx)

A customizable modal window that handles visibility, keyboard navigation, and body scroll locking. Use this for pop-up forms, alerts, or focused user interactions.

// Source: https://github.com/AIStarterKit/ai-saas-starter-kit-nextjs | License: MIT | Copyright 2025 AIStarterKit
// Provided via justclaw.it.com; keep this notice with the code.
"use client";

import { cn } from '@/lib/utils';
import { type ReactNode, useEffect } from 'react';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  description?: string;
  children: ReactNode;
  className?: {
    modal?: string;
  };
}

export function Modal({
  isOpen,
  onClose,
  title,
  description,
  children,
  className,
}: ModalProps) {
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
      document.body.style.overflow = 'hi

... (truncated -- full source via MCP)