2 files changed, 59 insertions, 0 deletions
diff --git a/examples/framework-solid/src/components/Counter.tsx b/examples/framework-solid/src/components/Counter.tsx
new file mode 100644
index 000000000..78944a11e
--- /dev/null
+++ b/examples/framework-solid/src/components/Counter.tsx
@@ -0,0 +1,21 @@
+import { createSignal } from "solid-js";
+
+/** */
+export default function SolidCounter({ children }) {
+  const [count, setCount] = createSignal(0);
+  const add = () => setCount(count() + 1);
+  const subtract = () => setCount(count() - 1);
+
+  return (
+    <>
+      <div class="counter">
+        <button onClick={subtract}>-</button>
+        <pre>{count()}</pre>
+        <button onClick={add}>+</button>
+      </div>
+      <div class="children">
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/examples/framework-solid/src/pages/index.astro b/examples/framework-solid/src/pages/index.astro
new file mode 100644
index 000000000..2c279a7af
--- /dev/null
+++ b/examples/framework-solid/src/pages/index.astro
@@ -0,0 +1,38 @@
+---
+import Counter from '../components/Counter.tsx';
+---
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+    <style>
+      :global(:root) {
+        font-family: system-ui;
+        padding: 2em 0;
+      }
+      :global(.counter) {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        place-items: center;
+        font-size: 2em;
+        margin-top: 2em;
+      }
+      :global(.children) {
+        display: grid;
+        place-items: center;
+        margin-bottom: 2em;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <Counter client:visible>
+        <h1>Hello Solid!</h1>
+      </Counter>
+    </main>
+  </body>
+</html>