An Alpine & Tailwind UI Library

Pines is a library of animations, sliders, tooltips, accordions, modals, and more! It's a set of UI elements that can be copy and pasted into any Alpine and Tailwind projects.

Pines is a UI library built for AlpineJS and TailwindCSS.
Add AlpineJS and TailwindCSS to your page and then copy and paste any of these elements into your project.
Absolutely! Pines works with any other library or framework. Pines works especially well with the TALL stack.

Product Name

This card element can be used to display a product, post, or any other type of data.

This is the content body inside of the first tab. This is the content body inside of the second tab.
My Account

No additional baggage included

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.

How to use

            <!-- 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.

Easy to add to any project

Copy'n Paste elements that feel so right!

Add a delightful user experience to your applications with these beatifully crafted elements. Integrating these into your project is as simple as copy and paste!

  • Command Menu
  • Image Gallery
  • Context Menu
  • Select Dropdown
  • Menu Bar
  • Radio Group
  • Text Animations
Right click here

Pines UI Library

A project by DevDojo