Installation & Setup in Alpine.js

From the Alpine.js cheat sheet · Getting Started · verified Jul 2026

Installation & Setup

Add Alpine.js to your project via CDN or npm

html
<!-- CDN (Recommended for quick start) -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- NPM Installation -->
npm install alpinejs

// Import in your bundle
import Alpine from 'alpinejs'
Alpine.start()
✅ Use defer attribute to ensure Alpine loads after DOM
💡 CDN is perfect for prototyping and small projects
🔍 NPM install gives you more control and build optimization
⚡ Minified CDN version is only ~15KB gzipped
installationsetupcdnnpm

More Alpine.js tasks

Back to the full Alpine.js cheat sheet