2 files changed, 73 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..00182f006
--- /dev/null
+++ b/examples/framework-alpine/src/components/Counter.astro
@@ -0,0 +1,34 @@
+---
+// Full Astro Component Syntax:
+// https://docs.astro.build/basics/astro-components/
+
+interface Props {
+	initialCount?: number;
+}
+
+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..e77744cb2
--- /dev/null
+++ b/examples/framework-alpine/src/pages/index.astro
@@ -0,0 +1,39 @@
+---
+// Component Imports
+import Counter from '../components/Counter.astro';
+
+// Full Astro Component Syntax:
+// https://docs.astro.build/basics/astro-components/
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<style>
+			html,
+			body {
+				font-family: system-ui;
+				margin: 0;
+			}
+			body {
+				padding: 2rem;
+			}
+		</style>
+	</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>