Open source · Pines UI
An Alpine & Tailwind UI Library.
Pines is a library of animations, sliders, tooltips, accordions, modals, and more — UI elements you copy and paste into any Alpine and Tailwind project.
Break free from the burden of adding another library.
All you need is Alpine and Tailwind and you're good to go! Learn why we built it this way, by diving into the docs.
<!-- Include the Alpine library on your page -->
<script src="//unpkg.com/alpinejs" defer></script>
<!-- Include the TailwindCSS library on your page -->
<script src="https://cdn.tailwindcss.com"></script>Then, copy and paste any element into your page and it will work like magic.
The library
42 elements, ready to paste
Interactive elements crafted with Alpine directives and Tailwind utilities — each one a copy-paste away from working in your project.
The idea
Copy. Paste. Interactive.
No package to install, no build step to configure, no framework to marry — just markup that works wherever Alpine and Tailwind do.
- Copy, paste, done
- Every element is self-contained markup — drop it into your page and it just works.
- Powered by Alpine
- Interactions come from AlpineJS directives you can read, tweak, and extend.
- Styled with Tailwind
- Utility classes all the way down, so restyling means editing classes you already know.
- Everything you reach for
- Accordions, modals, date pickers, command palettes, tooltips, marquees, and more.
- Works anywhere
- Laravel, Rails, static HTML — any stack that can load two script tags.
- Free and open source
- MIT-licensed and built in the open with the DevDojo community.
Grab an element and make it yours.
Start with the docs — every element ships with a live preview and the code behind it.