41 alpine.js Examples
Alpine.js offers a lightweight, declarative way to add interactivity to HTML. This collection features practical examples — like dropdowns, modals, accordions, and tabs — demonstrating how you can build reactive components without the overhead of larger frameworks.
Last updated:
Responsive Social Platform UI
A complex, full-featured, and responsive interface that effectively uses Alpine.js to manage panel states, which is especially crucial for mobile UX.
Animated and Accessible Tabs with Tailwind CSS and Alpine.js
A highly interactive and accessible component that uses kinetic effects (content bouncing in) to capture attention when switching between tabs.
Fancy Testimonial Slider with Tailwind CSS and Alpine.js
A highly dynamic slider where testimonial switching is accompanied by complex avatar rotation animation and smooth text fading/appearing.
Glassmorphic Sidebar with Tailwind
A responsive, glassmorphic sidebar utilizing Alpine.js state management to control its collapse.
Mario Kart Tabs UI
A visually appealing and reactive component that uses advanced techniques (CSS variables, synchronized transforms, dynamic styles) to create a deeply integrated user experience that mimics a game UI.
Select with Alpine.js and Tailwind
A beautiful, custom dropdown list that is fully designer-controlled but retains all the basic functionality and accessibility provided by the native form element.
Simple Tabs with Alpine and Tailwind
An elegant, dark, and compact component that provides a smooth transition between detailed information cards, using complex CSS classes to reflect the active state.
Tailwind Alpine.js Sidebar
An elegant and functional panel that smoothly disappears, leaving only the control button visible on the screen, creating an elegant and functional, but visually jarring, button position switch effect due to its instantaneous movement after state change.
Testimonial with Tailwind CSS and Alpine.js
A visually striking Testimonial Slider utilizing Alpine.js for click-based state switching.
Toggle Switch with Tailwind and Alpine.js
A smooth, tactile, and visually appealing toggle switch that smoothly slides and changes background color upon clicking.
Tooltip-like Testimonial with Tailwind and Alpine.js
A technically advanced testimonial tooltip utilizing Alpine.js for interactive state control.
Alpine.js and Tailwind Image Gallery
A beautiful, asymmetrical mosaic of photos that smoothly expands an image to full screen with a dimmed background upon clicking, providing a comfortable viewing experience.
Alpine.js and Tailwind Radio Group Component
A highly interactive custom radio group where Alpine.js manages selection state using x-model.
Animated Progress Circle with Tailwind and Alpine.js
A comparative component of two circular progress dials, demonstrating the implementation difference between Vanilla JS and Alpine.js.
Expandable Header with Tailwind CSS and Alpine.js
A stylish, smooth, and functional menu that “grows” downwards upon opening, offering a rich set of links and categories separated by gradient lines.
Modal Video with HTML, Tailwind CSS, and Alpine.js
A responsive modal video player component built with Tailwind CSS and Alpine.js. It features a clickable thumbnail with a hover-animated play button that triggers a fullscreen modal.
Pricing Table with Monthly/Yearly Toggle in Tailwind CSS
A seamless and responsive pricing plan toggle with a tactile slider animation, providing instant feedback without page reloads.
Pricing Table with Range Slider (Tailwind and Alpine.js)
A high-end, data-driven pricing component where a range slider dynamically updates tiered costs. It combines Alpine.js state management with CSS-variable-powered masking to deliver a fluid, reactive UI.
Range Against the Machine with Tailwind and Alpine.js
A highly interactive and visually rich component demonstrating the limits of modern CSS capabilities combined with declarative state management, allowing designers to create non-standard input forms with kinetic feedback.
Tailwind and Alpine.js To-Do List
A convenient, minimalist todo list with notes support, featuring inline editing, task completion, and deletion capabilities.
Tailwind CSS Pagination with Previous/Next Buttons
An elegant centered pagination bar using Tailwind utilities to style “Previous” and “Next” buttons that adapt to light/dark themes and hide labels on small screens, delivering a clean, responsive navigation cue.
Tailwind CSS Pricing Table with Features Comparison
A feature comparison table where Alpine.js reactive state manages billing cycles.
Tailwind Menu Example
A fully functional navigation bar featuring a logo, links, a dropdown menu with icons (Solutions), and login/signup buttons, which smoothly transforms into a mobile menu on smaller screens.
Alpine.js and Tailwind Radial Chart
A visually engaging radial bar chart widget created with amCharts 4 and styled within a Tailwind CSS card container.
Analog Clock with Alpine.js and Tailwind
A set of real-time analog world clocks built with Alpine.js and Tailwind CSS. Each clock instance independently calculates hand rotation angles based on specific time zones using JavaScript’s Date and setInterval.
Animated Counter with Alpine.js and Tailwind
Numbers on the screen do not appear instantly but rapidly “count up” from zero to the final value, capturing user attention and creating a sense of dynamism.
Animated Number Counter with Tailwind CSS
When the user scrolls to the statistics section, the numbers smoothly and impressively “count up” from zero to the target value without relying on heavy JS libraries.
Counter with Tailwind and Alpine.js
An interactive counter widget built with Alpine.js and Tailwind CSS.
