# Pinemix A handcrafted library of free, ready-to-use Alpine.js components designed with Tailwind CSS. Copy-paste interactive components into your web projects. Pinemix provides lightweight, reactive UI components built with Alpine.js and styled with Tailwind CSS. All components are completely free for open source, personal, and commercial projects. They feature responsive design, dark mode support, accessibility, and RTL support out of the box. ## Tech Stack - Alpine.js 3.x - Alpine.js Focus Plugin - Tailwind CSS 4.x - @tailwindcss/forms 0.5.x - @tailwindcss/typography 0.5.x ## Designed by pixelcave - [CodedVisuals](https://codedvisuals.com): The visual layer for your marketing site. Drop-in animated visual compositions that make your React and shadcn/ui marketing pages stand out. Powered by Motion, with skills your AI agent can build with. - [Tailkit](https://tailkit.com): A collection of beautiful, customizable components for Tailwind CSS. Now in your AI editor through our custom MCP server. - [Available for freelance work](https://pixelcave.com/#freelance): Freelance web development, design and consultation services available. Contact us to discuss your project needs and requirements. - [Pixelcave insider newsletter](https://pixelcave.com/#subscribe): Subscribe to receive exclusive free templates, work insights, project updates, and special offers delivered a few times per month. - [About](https://pixelcave.com/about): About pixelcave - [Contact](https://pixelcave.com/contact): Get in touch ## Documentation - [Introduction](https://pinemix.com/docs/introduction/): Overview of Pinemix, its key features, and how to use the components. - [Getting Started](https://pinemix.com/docs/getting-started/): Step-by-step setup guide for Tailwind CSS, Alpine.js, and required plugins. ## Components - [All Components](https://pinemix.com/components/): Browse all available Alpine.js components. - [Accordion](https://pinemix.com/components/accordion/): Toggle between content exclusively. Perfect for FAQs. - [Banner](https://pinemix.com/components/banner/): A lightweight, configurable component for displaying important messages or alerts to users. - [Breadcrumb](https://pinemix.com/components/breadcrumb/): Array-driven navigation trail with optional icons, current page indication, and smart truncation for long paths. - [Color Picker](https://pinemix.com/components/color-picker/): A component that allows users to select a color from a palette or input a custom color value. - [Combobox](https://pinemix.com/components/combobox/): An autocomplete input that filters options as you type, with keyboard navigation, single or multiple selection, and optional custom values. - [Command Palette](https://pinemix.com/components/command-palette/): Provide users with quick access to commands and actions within an application. Requires the Alpine.js focus plugin. - [Copy to Clipboard](https://pinemix.com/components/copy-to-clipboard/): A component that allows users to copy text to the clipboard. - [Countdown](https://pinemix.com/components/countdown/): A customizable countdown timer for events or deadlines. - [Dark Mode Toggle](https://pinemix.com/components/dark-mode-toggle/): A component that allows users to toggle between light and dark mode. - [Dropdown](https://pinemix.com/components/dropdown/): A customizable menu that allows users to select an option from a list. - [Image Gallery](https://pinemix.com/components/image-gallery/): A grid-based image gallery with a fullscreen lightbox for viewing images. - [Image Slider](https://pinemix.com/components/image-slider/): Display a sequence of images with navigation controls and optional autoplay functionality. - [Marquee](https://pinemix.com/components/marquee/): A component that creates an infinite scrolling animation for any type of content. - [Modal](https://pinemix.com/components/modal/): An element that displays content on top of the current page. - [Notification](https://pinemix.com/components/notification/): A small stackable element that presents information on top of the main content. - [Offcanvas](https://pinemix.com/components/offcanvas/): A sleek, hidden sidebar that slides into view from the edge of the screen. - [Password Strength](https://pinemix.com/components/password-strength/): A component that displays the strength of a password. - [Popover](https://pinemix.com/components/popover/): A small overlay window that appears on top of the main content. - [Pricing Switch](https://pinemix.com/components/pricing-switch/): A switch that lets you toggle between monthly and annual pricing. - [Progress Bar](https://pinemix.com/components/progress-bar/): A visual indicator that displays the completion status of a task or process. - [Range Slider](https://pinemix.com/components/range-slider/): A slider for picking a single value or a min/max range, with stepped values, tooltips, and full keyboard control. - [Rating](https://pinemix.com/components/rating/): A component that allows users to rate an item with stars. - [Select Menu](https://pinemix.com/components/select-menu/): Provide users with a more flexible and visually appealing way to choose from a list of options. Requires the Alpine.js focus plugin. - [Side Navigation](https://pinemix.com/components/side-navigation/): A component that allows users to navigate through a side navigation menu. - [Skeleton Loader](https://pinemix.com/components/skeleton-loader/): A component that displays a loading skeleton while content is being loaded. - [Table Sorting](https://pinemix.com/components/table-sorting/): A component that allows users to sort a table by clicking on the table headers. - [Tabs](https://pinemix.com/components/tabs/): Navigate between different sections or views within the same page. Requires the Alpine.js focus plugin. - [Tag Input](https://pinemix.com/components/tag-input/): A text input that converts typed values into removable tags. - [Tooltip](https://pinemix.com/components/tooltip/): A small element that provides additional information without cluttering the main interface. - [Tree View](https://pinemix.com/components/tree-view/): An expandable, collapsible tree structure for displaying hierarchical data. - [Two Factor](https://pinemix.com/components/two-factor/): Authentication form with six-digit code input. ## Plugins Most components need only Alpine.js core. These require the Alpine.js focus plugin and will throw on `x-trap` without it: Command Palette, Select Menu, Tabs. ## Legal - [License](https://pinemix.com/license/): Pinemix components are free to use in personal, commercial and open source projects. Read what is allowed and the one thing that is not. - [Privacy Policy](https://pinemix.com/privacy-policy/): What information pinemix.com collects, how it is used, who it is shared with, and the rights you have over your personal data. - [Terms of Service](https://pinemix.com/terms-of-service/): The terms that apply when you access or use pinemix.com, including acceptable use, intellectual property and liability.