Getting Started

Get up and running with Alpine Components in minutes.

1. Install

$

2. Choose an integration style

Alpine Components can be used via a simple script tag or integrated into your build process.

Script tag (CDN) style

The easiest way to start. Include the Alpine Components script before Alpine's core script. It auto-registers the plugin during alpine:init.

<!-- index.html -->
<script defer src="//unpkg.com/alpine-components"></script>
<script defer src="//unpkg.com/alpinejs"></script>

<script>
document.addEventListener('alpine:init', () => {
  Alpine.components.register('modal', 'modal/modal.html', 'modal/modal.js');
});
</script>

Module (bundler) style

If you're using Vite, Webpack, or another bundler:

npm install alpine-components alpinejs
// main.js
import Alpine from 'alpinejs';
import AlpineComponents from 'alpine-components';

// Initialize the plugin
Alpine.plugin(AlpineComponents({
  base: '/components'
}));

// Register your components
Alpine.components.register('modal', 'modal/modal.html', 'modal/modal.js');

Alpine.start();

3. Create a component

Components consist of an HTML template and an optional JS file for Alpine data:

src/components/
└── modal/
    ├── modal.html
    ├── modal.js
    └── modal.loading.html  ← optional

modal.html

<template>
<div x-data="modal">
    <button x-bind="trigger">Open Modal</button>
    <dialog x-bind="dialog">
        <article>
            <header>
                <slot name="header">
                    <p><strong>Modal Title</strong></p>
                </slot>
            </header>
            <slot name="body">
                <p>Modal content goes here.</p>
            </slot>
            <footer>
                <button x-bind="closeButton">Close</button>
            </footer>
        </article>
    </dialog>
</div>
</template>

modal.js

export default function modal() {
    return {
        isOpen: false,

        get trigger() {
            return { '@click'() { this.isOpen = true } };
        },

        get dialog() {
            return { 'x-bind:open'() { return this.isOpen } };
        },

        get closeButton() {
            return { '@click'() { this.isOpen = false } };
        }
    };
}

4. Use the component

<template x-component="modal"></template>

Live Demo

Loading...

Next Steps