Image and Delete Modal Components with React and Tailwind CSS

Modals are essential components in SaaS applications (dashboards, CMS, LMS). It is used for confirmations, alerts, or additional interactions. A well-designed modal can enhance user experience while maintaining a clean and reusable codebase.

In this guide, I’ll show you how to create a reusable modal component using React and Tailwind CSS. We’ll follow best React practices by first building a customizable wrapper component for the modal, which will help us create a basic outline (overlay + close button) for each modal component.

Whether you’re developing a personal project, working for a client, or enhancing your design system, this tutorial simplifies modal management in React applications.

Creating the Modal Wrapper Component

The ModalWrapper is the foundation for all modals in our application. It provides the structure (overlay, close button) and ensures consistent behavior.

The ModalWrapper acts as a base structure for all modals. It handles the overlay and ensures consistent styling across different modals in your app.

It accepts children as props, we can create any modal content out it. We don't have to repeat the code for basic styling every time.

Code for ModalWrapper

1import { X } from 'lucide-react'
2import React from 'react'
3import useClickOutside from './useClickOutside'
4import useDisableScroll from './useDisableScroll'
5
6type ModalWrapperProps = {
7  children: React.ReactNode
8  onClose: () => void
9}
10
11const ModalWrapper: React.FC<ModalWrapperProps> = ({ children, onClose }) => {
12  const modalRef = useClickOutside(onClose)
13  useDisableScroll()
14
15  return (
16    <div className="fixed inset-0 z-[9999] flex h-full w-full items-center justify-center bg-black bg-opacity-50">
17      <div
18        ref={modalRef}
19        className="animate-zoom relative min-h-[200px] w-[40%] max-w-md rounded-2xl bg-white p-10 shadow-lg sm:w-11/12 sm:p-8"
20      >
21        <button
22          className="absolute right-4 top-4 text-gray-500 hover:text-gray-800"
23          onClick={onClose}
24          aria-label="Close"
25        >
26          <X size={24} />
27        </button>
28        {children}
29      </div>
30    </div>
31  )
32}
33
34export default ModalWrapper

The above modal wrapper component has three functionalities:

1. Animates the modal on open and close.
2. Disables scrolling.
3. Closes the modal when clicking outside.

Whatever modal we create from the modal wrapper will include all the above functionalities.

1. Adding Modal Animations in Tailwind CSS

We added animations to our modal using CSS animations. There are two approaches depending on Tailwind CSS version:

• For Tailwind CSS v3: Define animations in tailwind.config.js file by extending the animation and keyframes sections.
• For Tailwind CSS v4: Define animations in global CSS file (like globals.css or index.css) using the @theme directive as shown in the CSS example above.

Both approaches create the same zoom effect that makes the modal grow when it opens, but the implementation differs based on Tailwind version.

2. Disable Scroll When Modal Opens

To stop the background from scrolling when the modal is open, we created a custom hook useDisableScroll that set the overflow style of the body to hidden. Once the modal is closed, reset the overflow style to unset.

3. Close Modal on Outside Click

To close the modal when clicking outside of it, we created a custom hook useClickOutside that check if the click happened outside the modal's container. If it did, we trigger the close function.

Delete Modal Component with Tailwind CSS

This modal is specifically for confirmations before delete an item from an app. It uses the ModalWrapper to display its content and actions.

It includes:

• A semi-transparent background overlay.
• A close icon in the top-right corner.
• Title to explain the modal action.
• Action buttons for "Delete" and "Cancel."

Code for Delete Modal

How to Use in a Parent Component

• In demo file we are showing a modal using an "Open Modal" button in the UI. This is only for the demonstration purposes.

React Tailwind Image Modal

Image Modal Preview

Tailwind Image Modal Component Code

We created Image Modal component from ModalWrapper, so it has all the features.

Did it help? Let me know via LinkedIn, I would happy to have your feedback.