diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue
index 3f2a09ab..cc42bd56 100644
--- a/apps/www/.vitepress/theme/components/ComponentPreview.vue
+++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<{
 
 const { style, codeConfig } = useConfigStore()
 
-const codeString = ref('')
+const rawString = ref('')
 const codeHtml = ref('')
 
 function transformImportPath(code: string) {
@@ -34,8 +34,8 @@ function transformImportPath(code: string) {
 
 watch([style, codeConfig], async () => {
   try {
-    codeString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => transformImportPath(res.default.trim()))
-    codeHtml.value = await codeToHtml(codeString.value, {
+    rawString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim())
+    codeHtml.value = await codeToHtml(transformImportPath(rawString.value), {
       lang: 'vue',
       theme: cssVariables,
     })
@@ -72,8 +72,8 @@ watch([style, codeConfig], async () => {
           <StyleSwitcher />
 
           <div class="flex items-center gap-x-1">
-            <Stackblitz :key="style" :style="style" :name="name" :code="codeString" />
-            <CodeSandbox :key="style" :style="style" :name="name" :code="codeString" />
+            <Stackblitz :key="style" :style="style" :name="name" :code="rawString" />
+            <CodeSandbox :key="style" :style="style" :name="name" :code="rawString" />
           </div>
         </div>
         <div
diff --git a/apps/www/.vitepress/theme/utils/codeeditor.ts b/apps/www/.vitepress/theme/utils/codeeditor.ts
index 88243502..864146a6 100644
--- a/apps/www/.vitepress/theme/utils/codeeditor.ts
+++ b/apps/www/.vitepress/theme/utils/codeeditor.ts
@@ -18,7 +18,7 @@ export function makeCodeSandboxParams(componentName: string, style: Style, sourc
 export function makeStackblitzParams(componentName: string, style: Style, sources: Record<string, string>) {
   const files: Record<string, string> = {}
   Object.entries(constructFiles(componentName, style, sources)).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content))
-  console.log({ files, componentName, style, sources })
+
   return sdk.openProject({
     title: `${componentName} - Radix Vue`,
     files,
@@ -106,12 +106,20 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
     'autoprefixer': 'latest',
   }
 
+  // We have static replace here as this is only showing for code reproduction, doesn't need dynamic codeConfig
+  const transformImportPath = (code: string) => {
+    let parsed = code
+    parsed = parsed.replaceAll(`@/lib/registry/${style}`, '@/components')
+    parsed = parsed.replaceAll('@/lib/utils', '@/utils')
+    return parsed
+  }
+
   const componentFiles = Object.keys(sources).filter(key => key.endsWith('.vue') && key !== 'index.vue')
   const components: Record<string, any> = {}
   componentFiles.forEach((i) => {
     components[`src/${i}`] = {
       isBinary: false,
-      content: sources[i],
+      content: transformImportPath(sources[i]),
     }
   })