react-custom-modal-tailwindv4

A customizable React modal component styled with Tailwind CSS v4

Features

• Modal types: success, error, info, warning
• Fully styled using Tailwind CSS v4
• Close on backdrop click (configurable)
• Supports custom buttons and children
• Accessible (with aria attributes)
• Functional component with PropTypes validation

Installation

npm install react-custom-modal-tailwindv4

Don't forget to have React 19+ and Tailwind CSS 4.x installed in your project. This component uses Tailwind utility classes.

If Tailwind CSS v4 is not already configured in your project, follow the official setup guide.

Peer dependencies

{
  "react": ">=19",
  "react-dom": ">=19",
  "prop-types": "^15.8.1"
}

Usage

import Modal from 'react-custom-modal-tailwindv4';

<Modal
  isOpen={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  type="success"
  title="Success"
  message="Your changes have been saved!"
  showCloseIcon={true}
  showCloseButton={true}
/>

Props

Name	Type	Required	Default	Description
isOpen	boolean	✅	—	Controls the visibility of the modal
onClose	function	✅	—	Callback fired when the modal is closed
type	string	✅	—	Modal type: 'success', 'error', 'warning', 'info'
title	string	❌	—	Optional modal title
message	node	✅	—	Content of the modal (text or JSX)
customButton	node	❌	—	Replaces default buttons with custom JSX
showCloseIcon	boolean	❌	false	Show an "X" icon to close the modal
closeOnBackdropClick	boolean	❌	true	Close the modal when clicking outside the modal
children	node	❌	—	Custom content injected inside the modal
showCloseButton	boolean	❌	false	Shows a default “Close” button
showActionButtons	boolean	❌	false	Enables display of “Save” and “Cancel” buttons
showSaveButton	boolean	❌	true	Show Save button (only if showActionButtons is true)
showCancelButton	boolean	❌	true	Show Cancel button (only if showActionButtons is true)
onSave	function	❌	—	Function triggered when the Save button is clicked
onCancel	function	❌	—	Function triggered when the Cancel button is clicked

Example (with useState)

Below is a practical example using useState to control the modal after a successful user creation:

import { useState } from 'react';
import Modal from 'react-custom-modal-tailwindv4';

const UserFormPage = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [createdUser, setCreatedUser] = useState(null);

  const handleCreateUser = (userData) => {
    // Simulate saving data and show modal
    setCreatedUser(userData);
    setIsModalOpen(true);
  };

  return (
    <div className="p-4">
      {/* Your form component */}
      <UserForm onSubmit={handleCreateUser} />

      {/* Success modal displayed after form creation submission */}
      <Modal
        title="Success"
        message={
          <>
            User{' '}
            <strong className="text-2xl text-black">
              {createdUser?.firstName} {createdUser?.lastName}
            </strong>{' '}
            has been created!
          </>
        }
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        type="success"
        showCloseIcon={true}
        showCloseButton={true}
      />
    </div>
  );
};

TailwindCSS Purge Notice (build)

This modal uses dynamic class names based on the type prop (success, error, info, warning) and conditional rendering.
To ensure all Tailwind styles are preserved in production, you must safelist the following classes in your tailwind.config.js:

// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{js,jsx}'],
  safelist: [
    // Borders & Colors
    'border-green-500', 'border-red-500', 'border-yellow-500', 'border-blue-500', 'border-4',
    'text-green-700', 'text-red-700', 'text-yellow-700', 'text-blue-700',
    'bg-green-500', 'bg-red-500', 'bg-yellow-500', 'bg-blue-500', 'bg-gray-500', 'bg-white', 'bg-black/70',
    'hover:bg-green-700', 'hover:bg-red-700', 'hover:bg-yellow-700', 'hover:bg-blue-700', 'hover:bg-gray-700',

    // Text & Font
    'text-lg', 'text-xl', 'text-2xl', 'text-black', 'font-bold', 'font-normal',

    // Spacing
    'px-6', 'py-2', 'py-5', 'mx-2', 'mt-5', 'gap-4',

    // Layout & Flex
    'fixed', 'inset-0', 'flex', 'items-center', 'justify-center', 'relative', 'text-center',

    // Sizing
    'max-h-[90vh]', 'overflow-y-auto', 'rounded-xl', 'rounded-lg', 'size-5',

    // Positioning
    'absolute', 'top-1', 'right-1',

    // Effects & States
    'shadow-lg', 'cursor-pointer', 'focus:ring-1', 'focus:ring-black', 'focus:outline-none',

    // Accessibility - screen reader only 
    'sr-only',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

License

This project is licensed under the MIT License.