I have been a fan of tailwindcss and alpine.js from the beginning and have been delighted to learn that there are many component libraries around now that combine the two. In particular, I stumbled apon pines ui the other day and it looks really interesting.

Here's one progress bar example that I grabbed from the docs.

What makes these components special? It's really just an alpine component that's declared directly in HTML but notice in the code below how the top x-data declaration allows you to pass through any configurations for the component?

<div x-data="{
        progress: 0,
        progressInterval: null,
    }"
    x-init="
        progressInterval = setInterval(() => {
            progress = progress + 1;
            if (progress >= 100) {
                clearInterval(progressInterval);
            }
        }, 100);
    "
    class="relative w-full h-3 overflow-hidden rounded-full bg-neutral-100">
    <span :style="'width:' + progress + '%'" class="absolute w-24 h-full duration-300 ease-linear bg-neutral-900" x-cloak></span>
</div>

Neat! I have yet to try and use this in an actual project, but it's nice to see the alpine stack getting re-usable component support.

ps. While exploring this tool I was also made aware of kutty and pinemix that feel like they offer a similar service.