@versini/ui-modal

An accessible and feature-rich React modal dialog component built with TypeScript and TailwindCSS.

The Modal component provides fully accessible dialog functionality with focus management, keyboard navigation, and customizable styling options.

Table of Contents

• Features
• Installation
• Usage
• API

Features

• ♿ Fully Accessible: WCAG compliant with proper focus management and ARIA attributes
• ⌨️ Keyboard Navigation: ESC to close, tab trapping, focus restoration
• 🎨 Customizable: Multiple sizes, themes, and styling options
• 🔒 Focus Management: Automatic focus trapping and restoration
• 🌲 Tree-shakeable: Lightweight and optimized for bundle size
• 🔧 TypeScript: Fully typed with comprehensive prop definitions

Installation

npm install @versini/ui-modal

Note: This component requires TailwindCSS and the @versini/ui-styles plugin for proper styling. See the installation documentation for complete setup instructions.

Usage

Basic Modal

import { Modal } from "@versini/ui-modal";
import { useState } from "react";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal open={isOpen} onClose={() => setIsOpen(false)} title="Modal Title">
        <p>Modal content goes here.</p>
      </Modal>
    </>
  );
}

Confirmation Modal

import { Modal } from "@versini/ui-modal";
import { Button } from "@versini/ui-button";

function ConfirmationModal({ open, onClose, onConfirm }) {
  return (
    <Modal open={open} onClose={onClose} title="Confirm Action">
      <p>Are you sure you want to proceed?</p>
      <div className="flex space-x-2 mt-4">
        <Button variant="danger" onClick={onConfirm}>
          Confirm
        </Button>
        <Button variant="secondary" onClick={onClose}>
          Cancel
        </Button>
      </div>
    </Modal>
  );
}

Examples

Settings Modal

import { Modal } from "@versini/ui-modal";
import { TextInput } from "@versini/ui-textinput";
import { Toggle } from "@versini/ui-toggle";

function SettingsModal({ open, onClose }) {
  return (
    <Modal open={open} onClose={onClose} title="Settings" size="medium">
      <div className="space-y-4">
        <TextInput label="Username" name="username" />
        <TextInput label="Email" name="email" type="email" />
        <Toggle label="Enable notifications" />
        <div className="flex justify-end space-x-2">
          <Button variant="secondary" onClick={onClose}>
            Cancel
          </Button>
          <Button variant="primary">Save Changes</Button>
        </div>
      </div>
    </Modal>
  );
}