React Tailwind Modal

A lightweight, customizable, and fully animated React modal component built with Tailwind CSS. This component is designed to provide a smooth and intuitive user experience with fluid transitions. Currently, two official plugins are available:

Box Modal

Sidebar Left

Sidebar Right

Sidebar Top

Sidebar Bottom

Key Features

• Smooth Animations: Enjoy seamless fade-in and scale-in animations on open, and fade-out and scale-out animations on close.
• Multiple Modal Types: Support for various modal positions, including a standard box modal, and sidebars from the left, right, top, and bottom.
• Full Customization: Easily control the modal's maximum width (maxWidth), handle closing behavior, and add custom classes.
• Lightweight: Contains only the necessary logic, keeping the bundle size small.
• Tailwind CSS v4 Ready: Designed to work flawlessly with the latest Tailwind CSS ecosystem.

Require

   React v18 and up from v.1.0.3 

Installation

Install the component using npm or yarn.

  npm install react-tailwind-modal
  # or
  yarn add react-tailwind-modal

How to Use

Use the useState hook to control the modal's visibility. You can specify the desired modal type using the type prop.

// App.tsx
import { useState } from 'react';
import Modal from '@alnthea/react-tailwind-modal';

function App() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isSidebarRightOpen, setIsSidebarRightOpen] = useState(false);
    const [isSidebarBottomOpen, setIsSidebarBottomOpen] = useState(false);

    const closeModal = () => {
        setIsModalOpen(false);
        setIsSidebarRightOpen(false);
        setIsSidebarBottomOpen(false);
    };

    return (
        <div className="flex flex-col items-center justify-center min-h-screen bg-slate-200">
            <h1 className="text-3xl font-bold mb-6">Modal Usage Example</h1>
            <div className="flex space-x-4">
                <button
                    onClick={() => setIsModalOpen(true)}
                    className="px-6 py-3 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none"
                >
                    Open Box Modal
                </button>
                <button
                    onClick={() => setIsSidebarRightOpen(true)}
                    className="px-6 py-3 bg-green-500 text-white rounded-md hover:bg-green-600 focus:outline-none"
                >
                    Open Right Sidebar
                </button>
                <button
                    onClick={() => setIsSidebarBottomOpen(true)}
                    className="px-6 py-3 bg-purple-500 text-white rounded-md hover:bg-purple-600 focus:outline-none"
                >
                    Open Bottom Sidebar
                </button>
            </div>

            {/* Box Modal */}
            <Modal isOpen={isModalOpen} onClose={closeModal} maxWidth="3xl">
                <div className="p-4 bg-white rounded-xl shadow-lg">
                    <h2 className="text-2xl font-bold">Box Modal</h2>
                    <p className="mt-2 text-gray-600">
                        This is a standard box modal.
                    </p>
                    <button
                        onClick={closeModal}
                        className="mt-4 px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
                    >
                        Close
                    </button>
                </div>
            </Modal>

            {/* Right Sidebar */}
            <Modal isOpen={isSidebarRightOpen} onClose={closeModal} type="sidebar-right">
                <div className="p-6">
                    <h2 className="text-2xl font-bold mb-4">Right Sidebar</h2>
                    <p className="text-gray-600">Your sidebar content goes here.</p>
                </div>
            </Modal>

            {/* Bottom Sidebar */}
            <Modal isOpen={isSidebarBottomOpen} onClose={closeModal} type="sidebar-bottom">
                <div className="p-6">
                    <h2 className="text-2xl font-bold mb-4">Bottom Sidebar</h2>
                    <p className="text-gray-600">Your sidebar content goes here.</p>
                </div>
            </Modal>
        </div>
    );
}

export default App;

Props

Use the useState hook to control the modal's visibility.

Property	Type	Default	Description
children	ReactNode	undefined	The content to be displayed inside the modal.
isOpen	boolean	false	Controls the visibility of the modal.
onClose	() => void	(Required)	A function called when the modal should be closed.
disableClickOutside	boolean	false	If true, the modal will not close when clicking on the overlay.
maxWidth	'sm' | 'md' | 'lg' |'xl' |'2xl' |'3xl' |'4xl' |'5xl' |'6xl' |'7xl' |	'xl'	Sets the maximum width of the modal.
type/ModalType	'box' | 'sidebar-left' | 'sidebar-right' | 'sidebar-top' | 'sidebar-bottom'	'box'	Determines the type of modal and its animation.
className	string	''	Additional custom classes to be added to the modal container.

Tailwinds CSS v4 Safelist

Add safelist for tailwind css v4.1 and up in your app.css without this, the modal won't work.

  @import "tailwindcss";
  @source inline("{sm:,md:,lg:,xl:,2xl:,}max-w-{sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl}");

Local Development

Install the component using npm or yarn.

  # Clone the repository
  git clone https://github.com/AlnThea/react-tailwind-modal.git
    
  # Navigate to the project directory
  cd react-tailwind-modal
    
  # Install dependencies
  npm install
    
  # Run the development server
  npm run dev

License

  This project is licensed under the MIT License.