As I think you are more interested in the functional than the visual aspect of this element you should have a look at the excellent alpine.js components which includes a great modal:
You’ll like the price as well.
You can then make it look the way you want with Tailwind, no need for the full package there.
Just one quick question re Alpine Components - would they work alongside React? One specific part of my site is a React app and I would need to trigger a modal from within it, hopefully they would play nicely together?
If you’re using React, you should use that for the modal? react-modal should do it, or maybe you are already working with Headless UI?
Not sure if they work together well because they shouldn’t work together.
yes it’s a funny one, my site is Wordpress/Woocommerce but one particular page (product search results) is a react app (inside Wordpress)… so really need a modal solution that will work both from react and from ‘normal’ template page. I might just roll with my own!
For your information, SheafUI components work. There was a small error and workaround when setting it up, but I don’t recall it. Works fine. They work with both livewire & alpinejs.
@porobertdev - just trying to set up Sheaf UI, I ran wp acorn sheaf:init and pretty much accepted all the default options, but when it runs I got the following error: