Free Alpine.js UI Components with Tailwind CSS – Pinemix

Pinemix is a free, open-source library of pre-built Alpine.js components styled with Tailwind CSS.

It provides developers with ready-made interactive elements to enhance web projects quickly and easily through simple copy-pasting.

Features

Use Cases

• Interactive Dashboards: Employ Pinemix components like Accordion, Tabs, and Modals to create dynamic and informative dashboards. For example, display detailed data within an Accordion, switch between different data sets with Tabs, and show pop-up information in Modals.
• E-commerce Product Pages: Use the Image Slider, Tooltip, and Pricing Switch to enhance product presentations. Show multiple product images, provide additional information on hover, and allow customers to toggle between different pricing options.
• User Profile Settings: Utilize the Dropdown and Select Menu components to offer customizable user settings. Allow users to select their preferred language, notification settings, or other preferences.
• Blog or News Website: Incorporate components like the Banner to display prominent announcements or featured articles.
• Landing Pages: Use the Countdown component to generate excitement for upcoming product releases or special offers.

Components

The current UI Components includes:

• Accordion
• Banner
• Command Palette
• Countdown
• Dropdown
• Image Slider
• Modal
• Notification
• Offcanvas
• Popover
• Pricing Switch
• Progress Bar
• Select Menu
• Tabs
• Tooltip
• Two Factor Authentication

Installation

Prerequisites:

• Alpine.js 3.x
• Tailwind CSS 3.x
• Alpine Focus Plugin
• Tailwind CSS Plugins (aspect-ratio, forms, typography)

Basic Setup Steps:

1. Install Tailwind CSS plugins:

npm install @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography -D

2. Configure Tailwind CSS:

export default {
  content: ["./src/**/*.{html,js}"],
  darkMode: "selector",
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [aspectRatio, forms, typography],
};

3. Add Alpine.js:

import Alpine from "alpinejs";
import focus from "@alpinejs/focus";
window.Alpine = Alpine;
Alpine.plugin(focus);
Alpine.start();

Usage Guide

Basic Component Implementation:

1. Include required dependencies in your HTML:

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

2. Add the x-cloak style:

[x-cloak] {
  display: none !important;
}

3. Copy desired components from Pinemix into your HTML structure.

Related Resources

• Alpine.js: A lightweight JavaScript framework for declarative, reactive user interfaces. Alpine.js Documentation
• Tailwind CSS: A utility-first CSS framework for building fast and responsive designs. Tailwind CSS Documentation
• Flowbite: An open-source library of web components built using Tailwind CSS. Flowbite Documentation
• Headless UI: A set of completely unstyled, fully accessible UI components, designed to integrate with Tailwind CSS. Headless UI Documentation

FAQs

Is Pinemix free for commercial use?
Yes, Pinemix is completely free for use in personal, open-source, and commercial projects. Be sure to review the license for more details.

Can I use Pinemix with other CSS frameworks?
While Pinemix is designed with Tailwind CSS in mind, you can adapt the components for use with other frameworks by modifying the styles manually.

Is there a limit to the number of components I can use?
No, you can use as many components as you need in your project. The library continues to expand, with more components added regularly.

How do I customize the design of a Pinemix component?
Since the components are built with Tailwind CSS, you can easily customize the design by adding or modifying the existing utility classes.

Preview