From 8a0779db253861b911ec20f2e4e1c4829879f371 Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Mon, 30 Jun 2025 17:43:02 -0400
Subject: [PATCH] fix component paths

---
 packages/webawesome/docs/_layouts/component.njk | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/webawesome/docs/_layouts/component.njk b/packages/webawesome/docs/_layouts/component.njk
index 5225cc64d..42c6425d0 100644
--- a/packages/webawesome/docs/_layouts/component.njk
+++ b/packages/webawesome/docs/_layouts/component.njk
@@ -264,6 +264,9 @@
     The <a href="/docs/#quick-start-autoloading-via-cdn">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
   </p>
 
+
+  {% set componentName = component.tagName | stripPrefix %}
+  {% set componentPath = ["components/", componentName, "/", componentName, ".js"] | join("") %}
   <wa-tab-group label="How would you like to import this component?">
     <wa-tab panel="cdn">CDN</wa-tab>
     <wa-tab panel="npm">npm</wa-tab>
@@ -272,19 +275,20 @@
       <p>
         To manually import this component from the CDN, use the following code.
       </p>
-      <pre><code class="language-js">import '{% cdnUrl component.path %}';</code></pre>
+
+      <pre><code class="language-js">import '{% cdnUrl componentPath %}';</code></pre>
     </wa-tab-panel>
     <wa-tab-panel name="npm">
-      Coming soon!
+      <p>
+        To manually import this component from NPM, use the following code.
+      </p>
+      <pre><code class="language-js">import '@awesome.me/webawesome/dist/components/{{ componentPath }}';</code></pre>
     </wa-tab-panel>
     <wa-tab-panel name="react">
-      Coming soon!
-      {# NOTE - disabled for alpha/beta
       <p>
         To manually import this component from React, use the following code.
       </p>
-      <pre><code class="language-js">import '@shoelace-style/webawesome/react/{{ component.tagName | stripPrefix }}';</code></pre>
-      #}
+      <pre><code class="language-js">import '@awesome.me/webawesome/dist/react/{{ componentName }}';</code></pre>
     </wa-tab-panel>
   </wa-tab-group>