UI
Playground
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.
My Account
ProfileโงโP
BillingโB
SettingsโS
Keyboard shortcutsโK
Team
New Team
โ+T
GitHub
Support
Log outโงโQ
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
