And that's too much to think about if you want to implement it from scratch. So I have been making use of Tailwind UI's modal in the past few months, which does make use of Headless UI under the hood. So let's go ahead and take a look at this. So before we do this, let's set up our code to have a heading. So let's just grab this heading here, and then we'll make a button to open the modal. So I believe this should be after this div. Let's make another div here, mt-4, and say dialog modal. Okay, is that the right place? Hopefully it is.

So again, let's just make a container for that. And let's paste that button in, and that should be a normal button. Okay, let's close that out. And let's say openModel. So let's go ahead and take a look at the documentation. I'm just going to take the code from here, and then we'll talk through the different elements. So this is the button we just added. Looks like there is an openModel method, which we'll add in a second. Just put it here for now.

Looks like there is an open model method, which we'll add in a second. Just put it here for now. And this is where the model starts. We have this transition route, which wraps the dialog. So let's grab that. So let's grab everything here until the end of the transition route right here. And let's paste that into our code. So let's put it right underneath our button here. Okay, make sure to reinvent that. So let's make sure to add the imports.

Okay, make sure to reinvent that. So let's make sure to add the imports. And it looks like there's some state here, as well as a closeModel method as well. So let's add the imports. So all of this stuff we need. So two transition elements, and the dialog and the dialog sub-components. So let's put that in here. So I'm just going to paste it in here. Oops, I didn't copy for some reason. Make sure to copy that and paste it in here.

Oops, I didn't copy for some reason. Make sure to copy that and paste it in here. And it's not formatted, but that's fine. We also have to put it in our components key. And we also need some state here. So I'm just going to do it the Vue way. So data returns an object. And what do we have here? We have an isOpen boolean. So say isOpen, say false by default.

We have an isOpen Boolean. So say isOpen, say false by default. And we have a closeModel and openModel method. So let's grab these. And let's add a methods key. And let's paste that in there. methods, and we can paste that in. And we don't need dot value. And we do need this. Okay.

And we do need this. Okay. Hopefully I did that right. Let's take a look at Chrome. And let's open the model. Okay, so it does work. So let's take a look at some of the elements, and then we'll modify it a bit. So we have the transition route. So if you take a look at the documentation, you can see what that is. It's sort of headless UI's own transition component.

This is just a simple explanation with no code.

And this is just going to be an X button. So let's just say close for now. And let's see if that appears in the correct place. And it does. Let's set the click handler on it so we can close correctly. I believe we have the close modal method. So that should work. It does. And now all we need is the icon. So let's grab that from the icon set here.

And now all we need is the icon. So let's grab that from the icon set here. Look for the close button. And we can grab this one here. So let's copy the SVG. And let's go back to our code. And let's paste that in here. Let me just re-indent this. And I have it as a height of 5. So let's change that.

And I think that's it. One more thing to take note of is portals. So take a look at the documentation and says rendering to a portal. You'll see that it's automatically portaling our model towards the end of the DOM, which is usually what you want to do for accessibility. So no need to worry about that. Everything is done automatically, which is great. So let's go ahead and make a commit here. This is episode two. Dialogues or models.

This is episode two. Dialogues or models. Dialogues. Models.