Components

Interactive Alpine.js patterns you can use in your projects.

Counter

Reactive state with x-data, x-text, and @click

0

Dialog

Native <dialog> with $refs and backdrop click dismiss

Hello from Alpine!

This dialog uses the native <dialog> API controlled by Alpine's $refs. Click the backdrop or press Esc to close.

Accordion

Collapsible sections with x-show and x-transition

Alpine.js is a lightweight, declarative JavaScript framework for adding interactivity to HTML. Think of it as Tailwind for JavaScript — you write behavior directly in your markup using directives like x-data, x-show, x-model, and @click.
Astro ships zero JavaScript by default, and Alpine adds interactivity only where you need it. Together they give you a fast, minimal stack where you opt into reactivity component by component — no heavy SPA framework required.
This starter uses Astro's static output with @astrojs/alpinejs integration. Alpine directives like x-data and x-text work directly in .astro files. The result is a fully static site with interactive islands powered by Alpine's tiny 14kB runtime.

Tabs

Tabbed content with :class binding and x-text

This project demonstrates how Alpine.js integrates seamlessly into Astro pages. Each interactive component is an 'island' — Alpine hydrates only the elements that use its directives, keeping the rest of the page static and fast.

Todo List

Dynamic lists with x-for, x-model, and $dispatch

No tasks yet. Add one above!

Form Validation

Form handling with x-model, validation logic, and state-driven UI

Thanks, ! We'll be in touch at .