Alpine Components

Lazy-loaded components with slots for Alpine.js

Lazy LoadingLoad components on-demand with eager, visible, or event-based strategies. Only fetch what you need, when you need it.Learn more →
SlotsCustomize component content with named slots—just like Vue or Web Components. Define defaults, override as needed.Learn more →
Loading StatesShow placeholders while components load. Create skeleton UIs with a simple .loading.html file.Learn more →

Quick Example

// Register a component
AlpineComponent.register('modal', 'modal/modal.html', 'modal/modal.js');

// Use it in your HTML
<div x-component="modal">
    <slot name="header">Custom Title</slot>
</div>

Live Demo

Loading...

Get started with the full guide →

Installation

npm install alpine-components alpinejs

For the Vite plugin (recommended):

npm install -D vite-plugin-alpine-components

Configure the Vite plugin →