diff --git a/apps/www/.vitepress/theme/components/CodeSandbox.vue b/apps/www/.vitepress/theme/components/CodeSandbox.vue
index 8b55d399..d078bad3 100644
--- a/apps/www/.vitepress/theme/components/CodeSandbox.vue
+++ b/apps/www/.vitepress/theme/components/CodeSandbox.vue
@@ -4,7 +4,7 @@ import { Icon } from '@iconify/vue'
 import { makeCodeSandboxParams } from '../utils/codeeditor'
 import Tooltip from './Tooltip.vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { type Style } from '@/lib/registry/styles'
+import type { Style } from '@/lib/registry/styles'
 
 const props = defineProps<{
   name: string
diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue
index 7620e0da..d92e9cbe 100644
--- a/apps/www/.vitepress/theme/components/ComponentPreview.vue
+++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, onMounted } from 'vue'
 import StyleSwitcher from './StyleSwitcher.vue'
 import ComponentLoader from './ComponentLoader.vue'
 import Stackblitz from './Stackblitz.vue'
@@ -11,14 +12,24 @@ defineOptions({
   inheritAttrs: false,
 })
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   name: string
   align?: 'center' | 'start' | 'end'
   sfcTsCode?: string
   sfcTsHtml?: string
+  sfcTsCodeNewYork?: string
+  sfcTsHtmlNewYork?: string
 }>(), { align: 'center' })
 
 const { style } = useConfigStore()
+
+const sfcTsCodeComputed = computed(() => {
+  return style.value === 'default' ? decodeURIComponent(props.sfcTsCode ?? '') : decodeURIComponent(props.sfcTsCodeNewYork ?? '')
+})
+
+const sfcTsHtmlComputed = computed(() => {
+  return style.value === 'default' ? decodeURIComponent(props.sfcTsHtml ?? '') : decodeURIComponent(props.sfcTsHtmlNewYork ?? '')
+})
 </script>
 
 <template>
@@ -47,8 +58,8 @@ const { style } = useConfigStore()
           <StyleSwitcher />
 
           <div class="flex items-center gap-x-1">
-            <Stackblitz :key="style" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
-            <CodeSandbox :key="style" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
+            <Stackblitz :key="style" :style="style" :name="name" :code="sfcTsCodeComputed" />
+            <CodeSandbox :key="style" :style="style" :name="name" :code="sfcTsCodeComputed" />
           </div>
         </div>
         <div
@@ -62,7 +73,7 @@ const { style } = useConfigStore()
         </div>
       </TabsContent>
       <TabsContent value="code">
-        <div v-if="sfcTsHtml" class="language-vue" style="flex: 1;" v-html="decodeURIComponent(sfcTsHtml)" />
+        <div v-if="sfcTsHtml" class="language-vue" style="flex: 1;" v-html="sfcTsHtmlComputed" />
         <slot v-else />
       </TabsContent>
     </Tabs>
diff --git a/apps/www/.vitepress/theme/components/Stackblitz.vue b/apps/www/.vitepress/theme/components/Stackblitz.vue
index 383c470d..658fca3f 100644
--- a/apps/www/.vitepress/theme/components/Stackblitz.vue
+++ b/apps/www/.vitepress/theme/components/Stackblitz.vue
@@ -4,7 +4,7 @@ import { Icon } from '@iconify/vue'
 import { makeStackblitzParams } from '../utils/codeeditor'
 import Tooltip from './Tooltip.vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { type Style } from '@/lib/registry/styles'
+import type { Style } from '@/lib/registry/styles'
 
 const props = defineProps<{
   name: string
diff --git a/apps/www/.vitepress/theme/components/TabPreview.vue b/apps/www/.vitepress/theme/components/TabPreview.vue
index 46bb64ee..ebc2cd0c 100644
--- a/apps/www/.vitepress/theme/components/TabPreview.vue
+++ b/apps/www/.vitepress/theme/components/TabPreview.vue
@@ -7,6 +7,8 @@ const props = withDefaults(defineProps<{
   align?: 'center' | 'start' | 'end'
   sfcTsCode?: string
   sfcTsHtml?: string
+  sfcTsCodeNewYork?: string
+  sfcTsHtmlNewYork?: string
 }>(), {
   align: 'center',
   names: () => ['CLI', 'Manual'],
diff --git a/apps/www/.vitepress/theme/plugins/previewer.ts b/apps/www/.vitepress/theme/plugins/previewer.ts
index 5b5fca74..b4fc4137 100644
--- a/apps/www/.vitepress/theme/plugins/previewer.ts
+++ b/apps/www/.vitepress/theme/plugins/previewer.ts
@@ -18,11 +18,16 @@ export default function (md: MarkdownRenderer) {
       const { name, attrs } = props
       const pluginPath = dirname(__dirname)
       const srcPath = resolve(pluginPath, '../../src/lib/registry/default/example/', `${name}.vue`).replace(/\\/g, '/')
+      const srcPathNewYork = resolve(pluginPath, '../../src/lib/registry/new-york/example/', `${name}.vue`).replace(/\\/g, '/')
 
       if (!fs.existsSync(srcPath)) {
         console.error(`rendering ${path}: ${srcPath} does not exist`)
         return defaultRender!(tokens, idx, options, env, self)
       }
+      if (!fs.existsSync(srcPathNewYork)) {
+        console.error(`rendering ${path}: ${srcPathNewYork} does not exist`)
+        return defaultRender!(tokens, idx, options, env, self)
+      }
 
       let code = fs.readFileSync(srcPath, 'utf-8')
       code = code.replaceAll(
@@ -30,10 +35,17 @@ export default function (md: MarkdownRenderer) {
         '@/components/',
       )
 
+      let codeNewYork = fs.readFileSync(srcPathNewYork, 'utf-8')
+      codeNewYork = codeNewYork.replaceAll(
+        '@/lib/registry/default/',
+        '@/components/',
+      )
+
       const demoScripts = generateDemoComponent(md, env, {
         attrs,
         props,
         code,
+        codeNewYork,
         path: srcPath,
       })
 
diff --git a/apps/www/.vitepress/theme/plugins/utils.ts b/apps/www/.vitepress/theme/plugins/utils.ts
index 2d925566..026ac38c 100644
--- a/apps/www/.vitepress/theme/plugins/utils.ts
+++ b/apps/www/.vitepress/theme/plugins/utils.ts
@@ -9,19 +9,24 @@ export interface GenerateOptions {
   props: Record<string, any>
   path: string
   code: string
+  codeNewYork: string
 }
 
 export function parse(
   md: MarkdownRenderer,
   env: MarkdownEnv,
-  { code, attrs: _attrs, props }: GenerateOptions,
+  { code, codeNewYork, attrs: _attrs, props }: GenerateOptions,
 ) {
   const highlightedHtml = md.options.highlight!(code, 'vue', _attrs || '')
+  const highlightedNewYorkHtml = md.options.highlight!(codeNewYork, 'vue', _attrs || '')
   const sfcTsHtml = highlightedHtml
+  const sfcTsHtmlNewYork = highlightedNewYorkHtml
 
   const attrs
    = `sfcTsCode="${encodeURIComponent(code)}"\n`
    + `sfcTsHtml="${encodeURIComponent(sfcTsHtml)}"\n`
+   + `sfcTsCodeNewYork="${encodeURIComponent(codeNewYork)}"\n`
+   + `sfcTsHtmlNewYork="${encodeURIComponent(sfcTsHtmlNewYork)}"\n`
    + `v-bind='${JSON.stringify(props)}'\n`
 
   return {
@@ -29,6 +34,8 @@ export function parse(
     highlightedHtml,
     sfcTsCode: code,
     sfcTsHtml,
+    sfcTsCodeNewYork: codeNewYork,
+    sfcTsHtmlNewYork,
   }
 }
 
diff --git a/apps/www/src/lib/registry/default/example/InputWithIcon.vue b/apps/www/src/lib/registry/default/example/InputWithIcon.vue
index 04d295ff..0e393679 100644
--- a/apps/www/src/lib/registry/default/example/InputWithIcon.vue
+++ b/apps/www/src/lib/registry/default/example/InputWithIcon.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { Search } from 'lucide-vue-next'
 import { Input } from '@/lib/registry/default/ui/input'
 </script>
 
@@ -7,7 +7,7 @@ import { Input } from '@/lib/registry/default/ui/input'
   <div class="relative w-full max-w-sm items-center">
     <Input id="search" type="text" placeholder="Search..." class="pl-10" />
     <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
-      <MagnifyingGlassIcon class="size-6 text-muted-foreground" />
+      <Search class="size-6 text-muted-foreground" />
     </span>
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue b/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
index a92c3e04..9bb93e5b 100644
--- a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Minus, Plus } from 'lucide-vue-next'
+import { MinusIcon, PlusIcon } from '@radix-icons/vue'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
@@ -56,7 +56,7 @@ const data = [
               :disabled="goal <= 200"
               @click="goal -= 10"
             >
-              <Minus class="h-4 w-4" />
+              <MinusIcon class="h-4 w-4" />
               <span class="sr-only">Decrease</span>
             </Button>
             <div class="flex-1 text-center">
@@ -74,7 +74,7 @@ const data = [
               :disabled="goal >= 400"
               @click="goal += 10"
             >
-              <Plus class="h-4 w-4" />
+              <PlusIcon class="h-4 w-4" />
               <span class="sr-only">Increase</span>
             </Button>
           </div>