A (nearly complete) Radix UI package

Show and Tell
1

Over a year ago now I started on porting Radix UI to an Elm package. Making a few upgrades here and there like using native modals and the Popover API for toolips. I didn’t complete the work as I somewhat lost interest, but figured others might be interested in forking it or just straight up taking the code to do with as they wish. If you have any questions about it, I’d be happy to answer!

While I don’t use the package itself I do sometimes use it as a reference for how to do modals, and maybe tooltips, just straight copying those portions of code into newer projects that need these elements.

For the modals, the core of what you’d want to look at is these bits of code:

The rest of the Elm Modal file is more specific to Radix styling and options than what is needed to make a modal.

For the tooltips, dropdowns (select inputs), or anything Popover API related you’ll want to look at:

I don’t know if this is actually useful for anyone, but I do periodically see people ask about modals in Elm and I’ve found this works pretty well.

The modal stuff is fairly close to how it was done at Vendr when I migrated to using native modals. Though I think we might have used a port for opening/closing them instead of a property, I don’t fully remember. The tooltip JS code in my Radix code is also partially based off how we did tooltips at Vendr, though instead of using the Popover API we used elm-portal.

13 Likes
2

So cool, Wolfgang! Thanks for sharing this :star_struck: