Modal

A customizable modal component with support for headers, footers, and animations.

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Modal Code

Copy Modal Code

Modal Props

Name	Type	Required	Default	Description
isOpen	boolean	Yes	false	Controls the visibility of the modal.
onClose	() => void	Yes	undefined	Callback function triggered when the modal is closed.
children	React.ReactNode	Yes	undefined	Content to be displayed inside the modal.
className	string	No	undefined	Additional class names for styling the modal container.
overlayClassName	string	No	undefined	Class names for styling the modal overlay.
closeOnOutsideClick	boolean	No	true	Determines if the modal should close when clicking outside of it.
closeOnEsc	boolean	No	true	Determines if the modal should close when the Escape key is pressed.

ModalHeader Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	Content to be displayed in the modal header.
className	string	No	undefined	Additional class names for styling the modal header.

ModalTitle Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The title text to display in the modal header.
className	string	No	undefined	Additional class names for styling the modal title.

ModalDescription Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The description text to display in the modal body.
className	string	No	undefined	Additional class names for styling the modal description.

ModalBody Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	Content to be displayed in the modal body.
className	string	No	undefined	Additional class names for styling the modal body.

ModalFooter Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	Content to be displayed in the modal footer.
className	string	No	undefined	Additional class names for styling the modal footer.

ModalClose Props

Name	Type	Required	Default	Description
onClick	() => void	No	undefined	Callback function triggered when the close button is clicked.
className	string	No	undefined	Additional class names for styling the close button.