2 files changed, 69 insertions, 0 deletions
diff --git a/examples/framework-alpine/src/components/Counter.astro b/examples/framework-alpine/src/components/Counter.astro
new file mode 100644
index 000000000..24140ca16
--- /dev/null
+++ b/examples/framework-alpine/src/components/Counter.astro
@@ -0,0 +1,29 @@
+---
+// Full Astro Component Syntax:
+// https://docs.astro.build/core-concepts/astro-components/
+
+const { initialCount = 0 } = Astro.props;
+---
+
+<div class="counter" x-data=`{ count: ${initialCount} }`>
+  <button x-on:click="count--">-</button>
+  <pre x-text="count">{ initialCount }</pre>
+  <button x-on:click="count++">+</button>
+</div>
+
+<div class="counter-message">
+  <slot />
+</div>
+
+<style>
+.counter {
+  display: grid;
+  font-size: 2em;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 2em;
+  place-items: center;
+}
+.counter-message {
+  text-align: center;
+}
+</style>
diff --git a/examples/framework-alpine/src/pages/index.astro b/examples/framework-alpine/src/pages/index.astro
new file mode 100644
index 000000000..3046c0aa6
--- /dev/null
+++ b/examples/framework-alpine/src/pages/index.astro
@@ -0,0 +1,40 @@
+---
+// Component Imports
+import Counter from '../components/Counter.astro'
+
+// Full Astro Component Syntax:
+// https://docs.astro.build/core-concepts/astro-components/
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <style>
+      html,
+      body {
+        font-family: system-ui;
+        margin: 0;
+      }
+      body {
+        padding: 2rem;
+      }
+    </style>
+
+    <!-- Be sure to include AlpineJS -->
+    <script src="//unpkg.com/alpinejs" defer></script>
+  </head>
+  <body>
+    <main>
+      <!-- Note: no `client:load` necessary since AlpineJS is always included -->
+      <Counter>
+        <h1>Hello, AlpineJS!</h1>
+      </Counter>
+
+      <!-- Note: pass props to Astro components to initialize Alpine with a certain state -->
+      <Counter initialCount={5}>
+        <h2>Use Astro to pass in server-side props</h2>
+      </Counter>
+    </main>
+  </body>
+</html>