Theme Configuration

Modal Component Instructions

The Custom Modal Component provides a versatile solution for displaying modals in your application. This component allows you to easily control its visibility and customize its appearance and content through various props. Below are the available props and their usage:

onClose: A function prop that defines the action to take when the modal is requested to close. You can pass a function that handles the closing logic, allowing for smooth transitions and cleanup.

position: A string prop that specifies the position of the modal on the screen. For example, you can set position="center" to display the modal in the center of the viewport.

size: A string prop that sets the size of the modal. You can pass values like "xs", "sm", "md", "lg", or "xl" to adjust the width and height of the modal to fit your design requirements.

title: A string prop that allows you to set the title of the modal's header. For instance, passing title="Extra Small Modal" will display this text at the top of the modal.

content: A React fragment prop where you can define the main content of the modal. You can pass your JSX content directly, like this:

content={
   <>
    //your content code       
   <>
}

footer: A React fragment prop for adding custom footer content within the modal. You can provide your footer JSX in the same way:

footer={
  <>
   //your content code       
  <>
 }

Example

<Modal
  isOpen={isModalOpen}
  onClose={closeModal}
  position="center"
  size="xs"
  title="Extra Small Modal"
  content={
    <>
      {/* Your modal content goes here... */}
    <>
  }
  footer={
    <>
      {/* Your modal footer content goes here... */}
    <>
  }
/>

This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.