AOSSIE-Org · Divine-P-77777 · Mar 21, 2026 · Mar 21, 2026 · Mar 25, 2026
diff --git a/README.md b/README.md
@@ -72,7 +72,7 @@ Lightweight social sharing component for web applications. Zero dependencies, fr
 
 - 🌐 Multiple platforms: WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest
 - 🎯 Zero dependencies - pure vanilla JavaScript
-- ⚛️ Framework support: React, Preact, Next.js, Vue, Angular, or plain HTML
+- ⚛️ Framework support: React, Preact, SvelteKit, Next.js, Vue, Angular, or plain HTML
 - 🔄 Auto-detects current URL and page title
 - 📱 Fully responsive and mobile-ready
 - 🎨 Customizable themes (dark/light)
@@ -486,6 +486,44 @@ export default function Header() {
 
 </details>
 
+<details>
+<summary><b>🟠 SvelteKit</b></summary>
+
+### Step 1: Add CDN to `src/app.html`
+
+```html
+<head>
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"
+  />
+</head>
+<body>
+  <div id="svelte">%sveltekit.body%</div>
+  <script src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"></script>
+</body>
+```
+
+### Step 2: Use the Svelte wrapper in any `+page.svelte`
+
+```svelte
+<script>
+  import SocialShareButton from 'social-share-button-aossie/src/social-share-button-svelte.svelte';
+</script>
+
+<SocialShareButton
+  url="https://your-website.com"
+  title="Check this out!"
+  description="An amazing website"
+  theme="dark"
+  buttonText="Share"
+/>
+```
+
+The wrapper handles SSR guards, cleanup on destroy, and reactive prop updates on SvelteKit route transitions automatically.
+
+</details>
+
 ---
 
 ## Configuration

diff --git a/index.html b/index.html
@@ -474,6 +474,51 @@ <h2>⚛️ Preact Integration</h2>
           </code>
         </div>
       </div>
+      <!-- SvelteKit Integration -->
+      <div class="demo-section">
+        <h2>🟠 SvelteKit Integration</h2>
+        <p><strong>Step 1:</strong> Include CSS and JS via CDN in your <code>app.html</code></p>
+
+        <div class="code-block">
+          <button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
+          <span
+            class="copy-status"
+            aria-live="polite"
+            style="position: absolute; left: -9999px"
+          ></span>
+          <code>
+            &lt;link rel="stylesheet"
+            href="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.css"&gt;
+            &lt;script
+            src="https://cdn.jsdelivr.net/gh/AOSSIE-Org/SocialShareButton@v1.0.3/src/social-share-button.js"&gt;&lt;/script&gt;
+          </code>
+        </div>
+
+        <p><strong>Step 2:</strong> Import and use the component in a <code>+page.svelte</code> file</p>
+
+        <div class="code-block">
+          <button type="button" class="copy-btn" aria-label="Copy code">Copy</button>
+          <span
+            class="copy-status"
+            aria-live="polite"
+            style="position: absolute; left: -9999px"
+          ></span>
+          <code>
+            &lt;!-- +page.svelte --&gt;
+            &lt;script&gt;
+              import SocialShareButton from 'social-share-button-aossie/src/social-share-button-svelte.svelte';
+            &lt;/script&gt;
+
+            &lt;SocialShareButton
+              url="https://your-website.com"
+              title="Check this out!"
+              description="An amazing website"
+              theme="dark"
+              buttonText="Share"
+            /&gt;
+          </code>
+        </div>
+      </div>
       <!-- CTA Section -->
       <div class="cta-section">
         <h2 style="color: #fff; margin-bottom: 20px">Ready to Get Started?</h2>

diff --git a/src/social-share-button-svelte.svelte b/src/social-share-button-svelte.svelte
@@ -0,0 +1,91 @@
+<!-- Svelte 4 + 5 compat: disable runes so export-let props work in both versions -->
+<svelte:options runes={false} />
+
+<script>
+  import { onMount, onDestroy } from 'svelte';
+
+  export let url = '';
+  export let title = '';
+  export let description = '';
+  export let hashtags = [];
+  export let via = '';
+  export let platforms = ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit', 'pinterest'];
+  export let theme = 'dark';
+  export let buttonText = 'Share';
+  export let customClass = '';
+  export let onShare = null;
+  export let onCopy = null;
+  export let buttonStyle = 'default';
+  export let modalPosition = 'center';
+  // Analytics — the library itself never collects data.
+  // Provide any combination to connect your own analytics tools.
+  export let analytics = true;       // set to false to disable all event emission
+  export let onAnalytics = null;     // (payload) => void — direct callback hook
+  export let analyticsPlugins = [];  // array of adapter instances (see social-share-analytics.js)
+  export let componentId = null;     // optional string identifier for this instance
+  export let debug = false;          // log events to console during development
+
+  let container;
+  let shareButton = null;
+
+  onMount(() => {
+    // SSR guard — SvelteKit pre-renders on the server where window is undefined
+    if (typeof window !== 'undefined' && window.SocialShareButton && container) {
+      shareButton = new window.SocialShareButton({
+        container,
+        url: url || window.location.href,
+        title: title || document.title,
+        description,
+        hashtags,
+        via,
+        platforms,
+        theme,
+        buttonText,
+        customClass,
+        onShare,
+        onCopy,
+        buttonStyle,
+        modalPosition,
+        analytics,
+        onAnalytics,
+        analyticsPlugins,
+        componentId,
+        debug,
+      });
+    }
+  });
+
+  onDestroy(() => {
+    if (shareButton) {
+      shareButton.destroy();
+      shareButton = null;
+    }
+  });
+
+  // Reactive update — re-runs whenever any prop changes (e.g. SvelteKit route transitions).
+  // Without this, the share URL stays stale after client-side navigation.
+  $: if (shareButton) {
+    shareButton.updateOptions({
+      url: url || (typeof window !== 'undefined' ? window.location.href : ''),
+      title: title || (typeof document !== 'undefined' ? document.title : ''),
+      description,
+      hashtags,
+      via,
+      platforms,
+      theme,
+      buttonText,
+      customClass,
+      onShare,
+      onCopy,
+      buttonStyle,
+      modalPosition,
+      analytics,
+      onAnalytics,
+      analyticsPlugins,
+      componentId,
+      debug,
+    });
+  }
+</script>
+
+<div bind:this={container}></div>