40+ 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.
Examples
Simple Alpine.js Bar Chart
This Simple Alpine.js Bar Chart offers a minimalist alternative to heavyweight libraries like Chart.js or D3. By leveraging Alpine.js for reactivity and Tailwind CSS for styling, it renders a functional, interactive bar chart with a tiny footprint. It is ideal for dashboards where bundle size is a priority and complex charting features aren’t required. (Requires: Alpine.js, Tailwind CSS)
Chrome 80+
Edge 80+
Safari 14+
Firefox 78+
See the Pen Simple Alpine.js Bar Chart.
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.
See the Pen Responsive Social Platform UI.
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.
See the Pen Glassmorphic Sidebar with Tailwind.
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.
See the Pen Mario Kart Tabs 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.
See the Pen Select with Alpine.js and Tailwind.
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.
See the Pen Simple Tabs with Alpine and Tailwind.
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.
See the Pen Tailwind Alpine.js Sidebar.
Testimonial with Tailwind CSS and Alpine.js
A visually striking Testimonial Slider utilizing Alpine.js for click-based state switching.
See the Pen Testimonial with Tailwind CSS and Alpine.js.
Toggle Switch with Tailwind and Alpine.js
A smooth, tactile, and visually appealing toggle switch that smoothly slides and changes background color upon clicking.
See the Pen Toggle Switch with Tailwind and Alpine.js.
Tooltip-like Testimonial with Tailwind and Alpine.js
A technically advanced testimonial tooltip utilizing Alpine.js for interactive state control.
See the Pen Tooltip-like Testimonial with Tailwind and Alpine.js.
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.
See the Pen Alpine.js and Tailwind Image Gallery.
Alpine.js and Tailwind Radio Group Component
A highly interactive custom radio group where Alpine.js manages selection state using x-model.
See the Pen Alpine.js and Tailwind Radio Group Component.
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.
See the Pen Animated Progress Circle with Tailwind 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.
See the Pen Expandable Header with Tailwind CSS and Alpine.js.
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.
See the Pen Modal Video with HTML, Tailwind CSS, and Alpine.js.
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.
See the Pen Tailwind and Alpine.js To-Do List.
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.
See the Pen Tailwind CSS Pagination with Previous/Next Buttons.
Tailwind CSS Pricing Table with Features Comparison
A feature comparison table where Alpine.js reactive state manages billing cycles.
See the Pen Tailwind CSS Pricing Table with Features Comparison.
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.
See the Pen Tailwind Menu Example.
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.
See the Pen Alpine.js and Tailwind Radial Chart.
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.
See the Pen Analog Clock with Alpine.js and Tailwind.
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.
See the Pen Animated Counter with Alpine.js and Tailwind.
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.
See the Pen Animated Number Counter with Tailwind CSS.
Counter with Tailwind and Alpine.js
An interactive counter widget built with Alpine.js and Tailwind CSS.
See the Pen Counter with Tailwind and Alpine.js.
Cyberpunk AI Chat Interface
An immersive Cyberpunk AI interface utilizing Alpine.js for reactive state management and GSAP for fluid message sequencing.
See the Pen Cyberpunk AI Chat Interface.