Tailwind CSS React Modal / Dialog

Use responsive modal component with helper examples for modal ui, popup, open modal, full screen modal, center position & more. Open source license.

Basic example

Click the button to launch the modal.

        
            
      import React, { useState } from "react";
      import {
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
        TEModalFooter,
      } from "tw-elements-react";
      
      export default function BasicExample(): JSX.Element {
        const [showModal, setShowModal] = useState(false);
        return (
          <div>
            {/* <!-- Button trigger modal --> */}
            <TERipple rippleColor="white">
              <button
                type="button"
                className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                onClick={() => setShowModal(true)}
              >
                Launch demo modal
              </button>
            </TERipple>
      
            {/* <!-- Modal --> */}
            <TEModal show={showModal} setShow={setShowModal}>
              <TEModalDialog>
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModal(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>Modal body text goes here.</TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowModal(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
          </div>
        );
      }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Static backdrop

Add the staticBackdrop prop to the TEModal component so the modal doesn't close when you click outside of it.

        
            
      import React, { useState } from "react";
      import {
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
        TEModalFooter,
      } from "tw-elements-react";
      
      export default function StaticBackdrop(): JSX.Element {
        const [showModal, setShowModal] = useState(false);
        return (
          <div>
            {/* <!-- Button trigger modal --> */}
            <TERipple rippleColor="white">
              <button
                type="button"
                className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                onClick={() => setShowModal(true)}
              >
                Launch static backdrop modal
              </button>
            </TERipple>
      
            {/* <!-- Modal --> */}
            <TEModal show={showModal} setShow={setShowModal} staticBackdrop>
              <TEModalDialog>
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModal(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>...</TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowModal(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Understood
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
          </div>
        );
      }

Scrolling long content

When modals become too long for the users viewport or device, they scroll independent of the page itself.

        
            
      import React, { useState } from "react";
      import {
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
        TEModalFooter,
      } from "tw-elements-react";
      
      export default function ScrollingLongContent(): JSX.Element {
        const [showModal, setShowModal] = useState(false);
        return (
          <div>
            {/* <!-- Button trigger modal --> */}
            <TERipple rippleColor="white">
              <button
                type="button"
                className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                onClick={() => setShowModal(true)}
              >
                Launch demo modal long
              </button>
            </TERipple>
      
            {/* <!-- Modal --> */}
            <TEModal show={showModal} setShow={setShowModal}>
              <TEModalDialog>
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModal(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody style={{ minHeight: "1500px" }}>
                    This is some placeholder content to show the scrolling behavior
                    for modals. Instead of repeating the text the modal, we use an
                    inline style set a minimum height, thereby extending the length of
                    the overall modal and demonstrating the overflow scrolling. When
                    content becomes longer than the height of the viewport, scrolling
                    will move the modal as needed.
                  </TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowModal(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
          </div>
        );
      }

Modal dialog scrollable

Create a scrollable modal that allows scroll the modal body by adding scrollable prop to the TEModal component.

        
            
      import React, { useState } from "react";
      import {
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
        TEModalFooter,
      } from "tw-elements-react";
      
      export default function ModalDialogScrollable(): JSX.Element {
        const [showModal, setShowModal] = useState(false);
        return (
          <div>
            {/* <!-- Button trigger modal --> */}
            <TERipple rippleColor="white">
              <button
                type="button"
                className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                onClick={() => setShowModal(true)}
              >
                Launch demo modal dialog scrollable
              </button>
            </TERipple>
      
            {/* <!-- Modal --> */}
            <TEModal show={showModal} setShow={setShowModal} scrollable>
              <TEModalDialog>
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModal(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>
                    <p>
                      This is some placeholder content to show the scrolling behavior
                      for modals. We use repeated line breaks to demonstrate how
                      content can exceed minimum inner height, thereby showing inner
                      scrolling. When content becomes longer than the predefined
                      max-height of modal, content will be cropped and scrollable
                      within the modal.
                    </p>
                    <div style={{ height: "800px" }}></div>
                    <p>This content should appear at the bottom after you scroll.</p>
                  </TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowModal(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
          </div>
        );
      }

Vertically centered

Use centered prop on the TEModalDialog component to vertically center the modal.

        
            
      import React, { useState } from "react";
      import {
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
        TEModalFooter,
      } from "tw-elements-react";
      
      export default function VerticalyCentered(): JSX.Element {
        const [showVerticalyCenteredModal, setShowVerticalyCenteredModal] =
          useState(false);
        const [
          showVerticalyCenteredScrollModal,
          setShowVerticalyCenteredScrollModal,
        ] = useState(false);
        return (
          <div>
            <div className="space-x-2">
              {/* <!-- Button trigger vertically centered modal--> */}
              <TERipple rippleColor="white">
                <button
                  type="button"
                  className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                  onClick={() => setShowVerticalyCenteredModal(true)}
                >
                  Vertically centered modal
                </button>
              </TERipple>
      
              {/* <!--Button trigger vertically centered scrollable modal--> */}
              <TERipple rippleColor="white">
                <button
                  type="button"
                  className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                  onClick={() => setShowVerticalyCenteredScrollModal(true)}
                >
                  Vertically centered scrollable modal
                </button>
              </TERipple>
            </div>
      
            {/* <!--Verically centered modal--> */}
            <TEModal
              show={showVerticalyCenteredModal}
              setShow={setShowVerticalyCenteredModal}
            >
              <TEModalDialog centered>
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowVerticalyCenteredModal(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>
                    <p>This is a vertically centered modal.</p>
                  </TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowVerticalyCenteredModal(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
      
            {/* <!--Verically centered scrollable modal--> */}
            <TEModal
              show={showVerticalyCenteredScrollModal}
              setShow={setShowVerticalyCenteredScrollModal}
              scrollable
            >
              <TEModalDialog centered>
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowVerticalyCenteredScrollModal(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>
                    <p>
                      This is some placeholder content to show a vertically centered
                      modal. We've added some extra copy here to show how vertically
                      centering the modal works when combined with scrollable modals.
                      We also use some repeated line breaks to quickly extend the
                      height of the content, thereby triggering the scrolling. When
                      content becomes longer than the predefined max-height of modal,
                      content will be cropped and scrollable within the modal.
                    </p>
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <p>Just like that.</p>
                  </TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowVerticalyCenteredScrollModal(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
          </div>
        );
      }

Sizes

Use four different modal sizing options starting from small to extra large. Width of these modals will remain responsive when browsing on smaller devices. Simply add size="xl", size="lg" or size="sm" to the TEModalDialog component.

        
            
      import React, { useState } from "react";
      import {
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
      } from "tw-elements-react";
      
      export default function SizesExample(): JSX.Element {
        const [showModalXL, setShowModalXL] = useState(false);
        const [showModalLg, setShowModalLg] = useState(false);
        const [showModalSm, setShowModalSm] = useState(false);
      
        return (
          <div>
            <div className="space-x-2">
              {/* <!--Button trigger extra large modal--> */}
              <TERipple rippleColor="white">
                <button
                  type="button"
                  className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                  onClick={() => setShowModalXL(true)}
                >
                  Extra large modal
                </button>
              </TERipple>
      
              {/* <!--Button trigger large modal-->*/}
              <TERipple rippleColor="white">
                <button
                  type="button"
                  className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                  onClick={() => setShowModalLg(true)}
                >
                  Large modal
                </button>
              </TERipple>
      
              {/*  <!--Button trigger small modal--> */}
              <TERipple rippleColor="white">
                <button
                  type="button"
                  className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                  onClick={() => setShowModalSm(true)}
                >
                  Small modal
                </button>
              </TERipple>
            </div>
      
            {/* <!--Extra large modal-->*/}
            <TEModal show={showModalXL} setShow={setShowModalXL}>
              <TEModalDialog size="xl">
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Extra large modal
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModalXL(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>...</TEModalBody>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
      
            {/* <!--Large modal-->*/}
            <TEModal show={showModalLg} setShow={setShowModalLg}>
              <TEModalDialog size="lg">
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Large modal
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModalLg(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>...</TEModalBody>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
      
            {/* <!--Small modal-->*/}
            <TEModal show={showModalSm} setShow={setShowModalSm}>
              <TEModalDialog size="sm">
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Small modal
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModalSm(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>...</TEModalBody>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
          </div>
        );
      }

Positions

Use four different modal positions. By setting the position prop to top-right, top-left, bottom-right or bottom-left on the TEModalDialog component you can change the position of the modal. If you want to change the show/hide animation, you can change them in the theme prop as shown below.

        
            
      import React, { useState } from "react";
      import {
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
        TEModalFooter,
      } from "tw-elements-react";
      
      export default function PositionsExample(): JSX.Element {
        const [showModalTopRight, setShowModalTopRight] = useState(false);
        const [showModalTopLeft, setShowModalTopLeft] = useState(false);
        const [showModalBottomRight, setShowModalBottomRight] = useState(false);
        const [showModalBottomLeft, setShowModalBottomLeft] = useState(false);
        return (
          <div>
            <div className="space-x-2">
              {/* <!--Button trigger top right modal--> */}
              <TERipple rippleColor="white">
                <button
                  type="button"
                  className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                  onClick={() => setShowModalTopRight(true)}
                >
                  Top right
                </button>
              </TERipple>
      
              {/* <!--Button trigger top left modal--> */}
              <TERipple rippleColor="white">
                <button
                  type="button"
                  className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                  onClick={() => setShowModalTopLeft(true)}
                >
                  Top left
                </button>
              </TERipple>
      
              {/* <!--Button trigger bottom right modal--> */}
              <TERipple rippleColor="white">
                <button
                  type="button"
                  className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                  onClick={() => setShowModalBottomRight(true)}
                >
                  Bottom right
                </button>
              </TERipple>
      
              {/* <!--Button trigger bottom left modal--> */}
              <TERipple rippleColor="white">
                <button
                  type="button"
                  className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                  onClick={() => setShowModalBottomLeft(true)}
                >
                  Bottom left
                </button>
              </TERipple>
            </div>
      
            {/* <!--Top right modal--> */}
            <TEModal show={showModalTopRight} setShow={setShowModalTopRight}>
              <TEModalDialog
                position="top-right"
                theme={{
                  show: "translate-x-0 opacity-100",
                  hidden: "translate-x-[100%] opacity-0",
                }}
              >
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModalTopRight(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>Modal body text goes here.</TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowModalTopRight(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
      
            {/* <!--Top left modal--> */}
            <TEModal show={showModalTopLeft} setShow={setShowModalTopLeft}>
              <TEModalDialog
                position="top-left"
                theme={{
                  show: "translate-x-0 opacity-100",
                  hidden: "translate-x-[-100%] opacity-0",
                }}
              >
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModalTopLeft(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>Modal body text goes here.</TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowModalTopLeft(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
      
            {/* <!--Bottom right modal--> */}
            <TEModal show={showModalBottomRight} setShow={setShowModalBottomRight}>
              <TEModalDialog
                position="bottom-right"
                theme={{
                  show: "translate-x-0 opacity-100",
                  hidden: "translate-x-[100%] opacity-0",
                }}
              >
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModalBottomRight(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>Modal body text goes here.</TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowModalBottomRight(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
      
            {/* <!--Bottom left modal--> */}
            <TEModal show={showModalBottomLeft} setShow={setShowModalBottomLeft}>
              <TEModalDialog
                position="bottom-left"
                theme={{
                  show: "translate-x-0 opacity-100",
                  hidden: "translate-x-[-100%] opacity-0",
                }}
              >
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!--Modal title--> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModalBottomLeft(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>Modal body text goes here.</TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowModalBottomLeft(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
          </div>
        );
      }

Fullscreen modal

Set size="fullscreen" to TEModalDialog to create fullscreen modal.

        
            
      import React, { useState } from "react";
      import {
        TERipple,
        TEModal,
        TEModalDialog,
        TEModalContent,
        TEModalHeader,
        TEModalBody,
        TEModalFooter,
      } from "tw-elements-react";
      
      export default function FullscreenModal(): JSX.Element {
        const [showModal, setShowModal] = useState(false);
        return (
          <div>
            {/* <!-- Button trigger modal --> */}
            <TERipple rippleColor="white">
              <button
                type="button"
                className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                onClick={() => setShowModal(true)}
              >
                Launch demo modal full screen
              </button>
            </TERipple>
      
            {/* <!-- Modal --> */}
            <TEModal show={showModal} setShow={setShowModal} scrollable>
              <TEModalDialog size="fullscreen">
                <TEModalContent>
                  <TEModalHeader>
                    {/* <!-- Modal title --> */}
                    <h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
                      Modal title
                    </h5>
                    {/* <!--Close button--> */}
                    <button
                      type="button"
                      className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                      onClick={() => setShowModal(false)}
                      aria-label="Close"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </button>
                  </TEModalHeader>
                  {/* <!--Modal body--> */}
                  <TEModalBody>
                    <p className="px-10 text-center leading-[3rem]">
                      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                      Similique nesciunt repellat consectetur rem nam, facere,
                      expedita perspiciatis accusamus beatae aliquid dicta fugit ab
                      minima qui inventore. Animi tenetur tempore consequuntur!
                      Ducimus, praesentium, debitis iusto repellendus deleniti
                      molestias quod vero laboriosam deserunt itaque, voluptatum
                      labore nihil vitae repudiandae doloribus exercitationem at
                      aliquam! Nesciunt voluptatum temporibus excepturi dolores
                      incidunt laudantium odio debitis. Dicta totam sunt quo corrupti
                      accusamus et animi ratione consequatur molestias explicabo hic
                      eligendi necessitatibus laudantium, neque velit beatae magni.
                      Nemo vero blanditiis illum numquam libero necessitatibus fugiat
                      officiis repellendus. Optio, quis. Earum corporis vero debitis
                      unde rerum quod fuga, modi culpa veniam quos, quisquam soluta ea
                      voluptatum aliquam aperiam, vitae sint molestias? Cupiditate
                      quibusdam repudiandae, sapiente distinctio nihil sunt.
                      Aspernatur quas sapiente saepe quo autem ullam voluptatem
                      deleniti dolorum fugit tenetur incidunt obcaecati suscipit
                      adipisci in nulla quam ipsam enim facilis, corrupti alias rem?
                      Velit voluptatum recusandae officiis modi. Minus molestiae
                      consequatur assumenda reiciendis aperiam, eius iure repellendus.
                      Vel fugiat fuga quasi eos adipisci rem, necessitatibus odit
                      eius, quidem mollitia eum nesciunt officiis assumenda ab
                      laudantium reprehenderit quia! Consequuntur? Porro, nostrum et
                      dicta quo sint non sed officia voluptatem labore, laborum
                      dolores quos dolorem corporis iusto libero vel voluptate aliquid
                      obcaecati distinctio itaque optio, nihil magni temporibus.
                      Error, temporibus? Dolor, non? Adipisci nesciunt deleniti beatae
                      esse fugiat, quisquam minus eaque animi dolor aliquam aperiam.
                      Consequatur tempora amet fugit praesentium iste culpa quo,
                      quaerat perspiciatis deserunt quia nisi dolores ipsum? Nemo
                      incidunt quae nulla inventore aliquam alias natus iure!
                      Similique omnis enim esse praesentium est veniam dolor maxime.
                      Reprehenderit molestias cumque fugit dignissimos sunt sequi
                      enim. Adipisci beatae blanditiis dolores. Laudantium placeat,
                      asperiores tenetur praesentium beatae dignissimos magni
                      voluptate iusto dicta unde iste, ratione est sint eius fuga
                      consequatur eligendi iure provident. Consequuntur nobis quaerat
                      error est quos obcaecati exercitationem. Necessitatibus sunt
                      praesentium reiciendis tempora maiores? Asperiores similique,
                      natus sed quasi ut repudiandae aliquid deserunt tempore eligendi
                      repellat hic iusto eveniet neque quisquam, nulla porro, eum
                      magni repellendus minima eaque! Perspiciatis omnis odio
                      architecto recusandae quaerat harum vel ducimus ullam. Officiis
                      dolores sapiente nihil architecto veritatis quos provident
                      necessitatibus! Nostrum fugiat nisi placeat aspernatur deleniti
                      explicabo ab omnis odio. Ratione. Temporibus sunt nihil expedita
                      corrupti reiciendis, asperiores nostrum amet quam, totam ut
                      maiores magni saepe dolore at consectetur. Autem illum quos cum
                      perferendis quia voluptatibus tempore beatae quidem accusantium
                      temporibus. Magnam fugiat vero maiores, repellendus, ex quaerat
                      esse sunt eum itaque nihil pariatur laborum expedita veniam
                      dolorum reprehenderit nostrum accusantium autem! Consequatur
                      animi, quam numquam pariatur et quia odit ad. Porro provident
                      excepturi veniam exercitationem cumque deleniti aperiam!
                      Laudantium fugit magni, accusantium velit ipsa nostrum minima
                      temporibus distinctio cum minus quis voluptas expedita ad porro
                      quam earum fugiat, suscipit eius! Culpa vitae dolores labore
                      fugit necessitatibus similique ex ipsa? Dolorem earum quia
                      debitis quod suscipit aut nesciunt, necessitatibus error laborum
                      quasi nisi a cumque asperiores voluptate, expedita, officiis
                      perspiciatis ex! Ipsam optio quo deserunt magni cupiditate
                      exercitationem voluptas? Animi in asperiores quos minima a,
                      deleniti, facere vel ratione aut recusandae est voluptate minus.
                      Reiciendis eius doloremque magni, sit harum voluptatem?
                      Consectetur ad cum, rerum itaque veniam laudantium eligendi ut
                      tenetur mollitia nihil praesentium voluptatem, aspernatur,
                      dolorem modi?
                    </p>
                  </TEModalBody>
                  <TEModalFooter>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
                        onClick={() => setShowModal(false)}
                      >
                        Close
                      </button>
                    </TERipple>
                    <TERipple rippleColor="light">
                      <button
                        type="button"
                        className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
                      >
                        Save changes
                      </button>
                    </TERipple>
                  </TEModalFooter>
                </TEModalContent>
              </TEModalDialog>
            </TEModal>
          </div>
        );
      }

If you are looking for more advanced options, try Bootstrap Modal from MDBootstrap.

Name	Type	Default	Description
`appendToBody`	Boolean	`false`	Appends element to the end of the body
`backdrop`	Boolean	`true`	Sets a backrop for modal
`closeOnEsc`	Boolean	`true`	Allows to close modal on Escape keydown
`leaveHiddenModal`	Boolean	`true`	Defines whether the hidden modal stays in VDOM
`modalRef`	Reference	`-`	Reference to the modal element
`scrollable`	Boolean	`false`	Allows to scroll through long contents with a scrollbar
`show`	Boolean	`false`	Sets visibility of the modal
`setShow`	React.SetStateAction	`-`	Allows to pass the setState action to the Modal component which defines if modal is shown or not
`staticBackdrop`	Boolean	`false`	Creates static backdrop for the modal
`tag`	String	`'div'`	Defines tag of the `TEModal` element
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component

Name	Type	Default	Description
`centered`	Boolean	`false`	Vertically centeres modal dialog window
`size`	"sm" \| "lg" \| "xl" \| "fullscreen"	`-`	Defines the size of modal.
`position`	"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"	`-`	Changes the default modal position
`tag`	String	`'div'`	Defines tag of the `TEModalDialog` element
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component

Name	Type	Default	Description
`tag`	String	`'div'`	Defines tag of the `TEModalContent` element
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component

Name	Type	Default	Description
`tag`	String	`'div'`	Defines tag of the `TEModalHeader` element
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component

Name	Type	Default	Description
`tag`	String	`'div'`	Defines tag of the `TEModalBody` element
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component

Modal

Basic example

Static backdrop

Scrolling long content

Modal dialog scrollable

Vertically centered

Sizes

Positions

Fullscreen modal

Modal - API

Import

Properties

TEModal

TEModalDialog

TEModalContent

TEModalHeader

TEModalBody

TEModalFooter

Classes

TEModal

TEModalDialog

TEModalContent

TEModalHeader

TEModalBody

TEModalFooter

Events

Name	Default	Description
`show`	transform-none	Adds classes to the wrapper when the modal is shown
`static`	!scale-[1.02]	Adds classes to the wrapper when the modal is static and backdrop was clicked
`staticProperties`	transition-scale duration-300 ease-in-out	Adds classes to the wrapper when the modal is static (staticBackdrop is true)
`wrapper`	fixed left-0 top-0 z-[1055] h-full w-full overflow-y-auto overflow-x-hidden outline-none	Wrapper classes for `TEModal`

Name	Default	Description
`centered`	h-[calc(100vh-3.5rem)] flex items-center justify-center	Adds classes to the wrapper when the modal should be centered
`fullscreen`	!h-full w-full !m-0	Adds classes to the wrapper when size was set to fullscreen
`hidden`	translate-y-[-50px] opacity-0	Adds classes to the wrapper when the modal is hidden
`h-[calc(100vh-3.5rem)] scrollable`	overflow-hidden	Adds classes to the wrapper when the modal is set to be scrollable
`show`	translate-y-0 opacity-100	Adds classes to the wrapper when the modal is shown
`sizeDefault`	min-[576px]:max-w-[500px]	Sets the default size of the modal (size was not set)
`wrapper`	pointer-events-none transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7	Adds classes to the wrapper element
`wrapperPositionDefault`	relative w-auto	Sets the default position of the wrapper (position was not set)
`"bottom-left"`	w-full absolute bottom-7 left-7	Sets the position of the wrapper to bottom-left
`"bottom-right"`	w-full absolute bottom-7 right-7	Sets the position of the wrapper to bottom-right
`"top-left"`	w-full absolute left-7	Sets the position of the wrapper to top-left
`"top-right"`	w-full absolute right-7	Sets the position of the wrapper to top-right
`sm`	min-[576px]:max-w-[300px]	Adds classes to modal if the size was set to sm
`lg`	min-[992px]:max-w-[800px]	Adds classes to modal if the size was set to lg
`xl`	min-[992px]:max-w-[800px] min-[1200px]:max-w-[1140px]	Adds classes to modal if the size was set to xl

Name	Default	Description
`scrollable`	max-h-full	Adds classes to the content wrapper to make it scrollable
`wrapper`	min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)] pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-600	Adds classes to the content wrapper element

Name	Default	Description
`scrollable`	overflow-y-auto	Adds classes to the body wrapper element to make it scrollable
`wrapper`	relative flex-auto p-4	Adds classes to the body wrapper element

Event type	Description
`onHide`	This event is fired immediately when the `onHide` instance method has been called.
`onHidePrevented`	This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option.
`onShow`	This event fires immediately when the onShow instance method is called.

Modal

Tailwind CSS React Modal / Dialog

Basic example

Static backdrop

Scrolling long content

Modal dialog scrollable

Vertically centered

Sizes

Positions

Fullscreen modal

Related resources

Modal - API

Import

Properties

TEModal

TEModalDialog

TEModalContent

TEModalHeader

TEModalBody

TEModalFooter

Classes

TEModal

TEModalDialog

TEModalContent

TEModalHeader

TEModalBody

TEModalFooter

Events