2 files changed, 74 insertions, 0 deletions
diff --git a/examples/framework-svelte/src/components/Counter.svelte b/examples/framework-svelte/src/components/Counter.svelte
new file mode 100644
index 000000000..a11538645
--- /dev/null
+++ b/examples/framework-svelte/src/components/Counter.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children?: Snippet
+	}
+
+	let { children }: Props = $props();
+	let count = $state(0);
+
+	function add() {
+		count += 1;
+	}
+
+	function subtract() {
+		count -= 1;
+	}
+</script>
+
+<div class="counter">
+	<button onclick={subtract}>-</button>
+	<pre>{count}</pre>
+	<button onclick={add}>+</button>
+</div>
+<div class="message">
+	{@render children?.()}
+</div>
+
+<style>
+	.counter {
+		display: grid;
+		font-size: 2em;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		margin-top: 2em;
+		place-items: center;
+	}
+
+	.message {
+		text-align: center;
+	}
+</style>
diff --git a/examples/framework-svelte/src/pages/index.astro b/examples/framework-svelte/src/pages/index.astro
new file mode 100644
index 000000000..c4f0c1efb
--- /dev/null
+++ b/examples/framework-svelte/src/pages/index.astro
@@ -0,0 +1,33 @@
+---
+// Component Imports
+import Counter from '../components/Counter.svelte';
+
+// 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>
+			<Counter client:visible>
+				<h1>Hello, Svelte!</h1>
+			</Counter>
+		</main>
+	</body>
+</html>