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
Profile⇧⌘P
Billing⌘B
Settings⌘S
Keyboard shortcuts⌘K
Team
New Team
⌘+T
GitHub
Support
Log out⇧⌘Q
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
Back
⌘[
Forward
⌘]
Reload
⌘R
More Tools
Show Bookmarks Bar
⌘⇧B
Show Full URLs
People
Adam Wathan
Caleb Porzio