Looking for Bootstrap like Modal solution for tailwindcss in sage11

Just looking for a ‘free’(ish) Modal solution for Tailwind that works in a similar way to Bootstrap’s Modals - Modal · Bootstrap

I know that there is a Modal Dialog that’s part of Tailwind Plus - https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/modal-dialogs but thats a paid option which I’ll do as a last resort, but if anyone has a decent alternative, I’d appreciate the recommedation.

Thank you!

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. :slightly_smiling_face:

You can then make it look the way you want with Tailwind, no need for the full package there.

1 Like

Thank you for the tip @sitesandsuch - looks like it fits the bill!

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 what it’s worth, Radicle (not free) ships with a modal blade component that also works as a block that could be used as a reference

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.

2 Likes

@porobertdev - thanks for the tip, I’ll give that a try!

@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:

I know you said you had a work around you needed - would it have been to do with this and can you remember how you did it?

@the_lar Hi, I have rechecked my discord post: