Hello Developers! Today I am going to share with you how do you create custom modal? I am using next js and tailwind CSS. I am sharing with you step by step.
<ol>
<li>create modal component</li>
<li>declare state for modal</li>
<li>toggle the state</li>
<li>show the modal content according to state</li>
<li>modal should be fixed position. If you want to change background or want to give overlay fix the component with full area. Then design your modal on child component.</li>
</ol>
<pre><code>import React, { useState } from &#x27;react&#x27;;

const Modal = () =&gt; {
 const [openModal, setModal] = useState(false);
 const handleModal = () =&gt; {
 setModal(!openModal)
 }
 return (
 &lt;div&gt;
 &lt;button
 type=&#x27;button&#x27;
 className=&#x27;h-10 px-4 font-medium text-sm rounded-md text-white bg-gray-900&#x27;
 onClick={handleModal}
 &gt;Open Modal&lt;/button&gt;
 {openModal &amp;&amp;
 &lt;div className=&#x27;fixed top-0 left-0 w-full h-full bg-gray-300 flex justify-center items-center&#x27;&gt;
 &lt;div className=&#x27;max-w-[460px] bg-white shadow-lg py-2 rounded-md&#x27;&gt;
 &lt;h2 className=&#x27;text-sm font-medium text-gray-900 border-b border-gray-300 py-3 px-4 mb-4&#x27;&gt;This is my modal.&lt;/h2&gt;
 &lt;div className=&#x27;px-4 pb-4&#x27;&gt;
 &lt;p className=&#x27;text-sm font-medium text-gray-700&#x27;&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et quod quis eaque aliquam necessitatibus vel eligendi laboriosam optio quisquam sunt.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div className=&#x27;border-t border-gray-300 flex justify-between items-center px-4 pt-2&#x27;&gt;
 &lt;div className=&#x27;text-sm font-medium text-gray-700&#x27;&gt;Example Content&lt;/div&gt;
 &lt;button
 type=&#x27;button&#x27;
 className=&#x27;h-8 px-2 text-sm rounded-md bg-gray-700 text-white&#x27;
 onClick={handleModal}
 &gt;
 Close
 &lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 }

 &lt;/div&gt;
 );
};

export default Modal;
</code></pre>
Thank You

An independent Squad for discussions, questions and answers about Next.JS. 


NextJS

How do you create custom modal with next Js and Tailwindcss?

Thanks for share, a better semantic way is to use &lt;dialog&gt; for your modals and you can return a ref to access the methods .showModal() and close().
Another good thing about using dialog is that you don’t need to care about the overlay because it comes by default.