From b3332695c1546447d8097eda5038c7d6d398cc2f Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Sun, 19 Nov 2023 15:29:07 +0330
Subject: [PATCH] docs: add custom prefix and aliases capability

---
 .vscode/settings.json                         |   4 +-
 .../.vitepress/theme/layout/ThemingLayout.vue | 136 ++++++++++++++++--
 .../src/content/docs/components/accordion.md  |  29 ++--
 .../content/docs/components/alert-dialog.md   |  69 ++++-----
 apps/www/src/content/docs/components/alert.md |  19 ++-
 .../content/docs/components/aspect-ratio.md   |  16 ++-
 .../www/src/content/docs/components/avatar.md |  20 ++-
 apps/www/src/content/docs/components/badge.md |  18 ++-
 .../www/src/content/docs/components/button.md |  18 ++-
 .../src/content/docs/components/calendar.md   |  12 +-
 apps/www/src/content/docs/components/card.md  |  44 +++---
 .../src/content/docs/components/checkbox.md   |  12 +-
 .../content/docs/components/collapsible.md    |  28 ++--
 .../src/content/docs/components/command.md    |  76 +++++-----
 .../content/docs/components/context-menu.md   |  56 ++++----
 .../content/docs/components/date-picker.md    |  41 +++---
 .../www/src/content/docs/components/dialog.md |  52 ++++---
 .../content/docs/components/dropdown-menu.md  |  46 +++---
 apps/www/src/content/docs/components/form.md  |  87 ++++++-----
 .../src/content/docs/components/hover-card.md |  28 ++--
 apps/www/src/content/docs/components/input.md |  13 +-
 apps/www/src/content/docs/components/label.md |  15 +-
 .../src/content/docs/components/menubar.md    |  57 ++++----
 .../docs/components/navigation-menu.md        |  47 +++---
 .../src/content/docs/components/popover.md    |  29 ++--
 .../src/content/docs/components/progress.md   |  15 +-
 .../content/docs/components/radio-group.md    |  25 ++--
 .../content/docs/components/scroll-area.md    |  15 +-
 .../www/src/content/docs/components/select.md |  48 ++++---
 .../src/content/docs/components/separator.md  |  15 +-
 apps/www/src/content/docs/components/sheet.md |  45 +++---
 .../src/content/docs/components/skeleton.md   |  15 +-
 .../www/src/content/docs/components/slider.md |  17 ++-
 .../www/src/content/docs/components/switch.md |  13 +-
 apps/www/src/content/docs/components/table.md |  73 +++++-----
 apps/www/src/content/docs/components/tabs.md  |  37 +++--
 .../src/content/docs/components/textarea.md   |  13 +-
 apps/www/src/content/docs/components/toast.md |  20 ++-
 .../www/src/content/docs/components/toggle.md |  13 +-
 .../src/content/docs/components/tooltip.md    |  35 +++--
 apps/www/src/stores/config.ts                 |  15 +-
 41 files changed, 883 insertions(+), 503 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index de76ab63..4c691c48 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,8 +2,8 @@
   "prettier.enable": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": false
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
   },
 
   "eslint.validate": [
diff --git a/apps/www/.vitepress/theme/layout/ThemingLayout.vue b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
index 56398853..259a033f 100644
--- a/apps/www/.vitepress/theme/layout/ThemingLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
@@ -16,6 +16,10 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Di
 import RadixIconsCheck from '~icons/radix-icons/check'
 import RadixIconsSun from '~icons/radix-icons/sun'
 import RadixIconsMoon from '~icons/radix-icons/moon'
+import RadixIconsReset from '~icons/radix-icons/reset'
+import RadixIconsInfoCircled from '~icons/radix-icons/info-circled'
+
+import { cn } from '@/lib/utils'
 
 type Color =
   | 'zinc'
@@ -47,7 +51,7 @@ const allColors: Color[] = [
   'violet',
 ]
 
-const { theme, radius, setRadius, setTheme } = useConfigStore()
+const { theme, radius, setRadius, setTheme, codeConfig, config } = useConfigStore()
 const { isDark } = useData()
 
 // Whenever the component is mounted, update the document class list
@@ -131,17 +135,101 @@ watch(radius, (radius) => {
                   Customize
                 </Button>
               </PopoverTrigger>
-              <PopoverContent :side-offset="8" align="end" class="w-96">
-                <div class="p-4">
-                  <div class="grid space-y-1">
-                    <h1 class="text-md text-foreground font-semibold">
-                      Customize
-                    </h1>
-                    <p class="text-xs text-muted-foreground">
-                      Pick a style and color for your components.
-                    </p>
+              <PopoverContent :side-offset="8" align="end" class="p-6 w-96">
+                <div>
+                  <div class="flex items-start">
+                    <div class="space-y-1 pr-2">
+                      <h1 class="text-md text-foreground font-semibold">
+                        Customize
+                      </h1>
+                      <p class="text-xs text-muted-foreground">
+                        Pick a style and color for your components.
+                      </p>
+                    </div>
+                    <Button
+                      variant="ghost" size="icon" class="ml-auto rounded-[0.5rem]" @click="() => {
+                        config = {
+                          ...config,
+                          theme: 'zinc',
+                          radius: 0.5,
+                        }
+
+                        codeConfig = {
+                          prefix: '',
+                          aliases: {
+                            components: '@/components',
+                            utils: '@/lib/utils',
+                          },
+                        }
+                      }"
+                    >
+                      <RadixIconsReset />
+                    </Button>
                   </div>
-                  <div class="space-y-1.5 pt-6">
+                  <div class="flex flex-1 flex-col space-y-4 md:space-y-6 pt-4">
+                    <div class="space-y-1.5">
+                      <div class="flex w-full items-center">
+                        <Label class="text-xs">Style</Label>
+                        <Popover>
+                          <PopoverTrigger>
+                            <RadixIconsInfoCircled class="ml-1 h-3 w-3" />
+                            <span class="sr-only">About styles</span>
+                          </PopoverTrigger>
+                          <PopoverContent
+                            class="space-y-3 rounded-[0.5rem] text-sm"
+                            side="right"
+                            align="start"
+                            :align-offset="-20"
+                          >
+                            <p class="font-medium">
+                              What is the difference between the New York and Default style?
+                            </p>
+                            <p>
+                              A style comes with its own set of components, animations,
+                              icons and more.
+                            </p>
+                            <p>
+                              The <span class="font-medium">Default</span> style has
+                              larger inputs, uses lucide-react for icons and
+                              tailwindcss-animate for animations.
+                            </p>
+                            <p>
+                              The <span class="font-medium">New York</span> style ships
+                              with smaller buttons and cards with shadows. It uses icons
+                              from Radix Icons.
+                            </p>
+                          </PopoverContent>
+                        </Popover>
+                      </div>
+                      <div class="grid grid-cols-3 gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          :class="cn(
+                            config.style === 'default' && 'border-2 border-primary',
+                          )"
+                          @click="() => {
+                            config = { ...config, style: 'default' }
+                          }"
+                        >
+                          Default
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          :class="cn(
+                            config.style === 'new-york' && 'border-2 border-primary',
+                          )"
+                          @click="() => {
+                            config = { ...config, style: 'new-york' }
+                          }"
+                        >
+                          New York
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="space-y-1.5 pt-4">
                     <Label for="color" class="text-xs"> Color </Label>
                     <div class="grid grid-cols-3 gap-2 py-1.5">
                       <Button
@@ -171,7 +259,7 @@ watch(radius, (radius) => {
                       </Button>
                     </div>
                   </div>
-                  <div class="space-y-1.5 pt-6">
+                  <div class="space-y-1.5 pt-4">
                     <Label for="radius" class="text-xs"> Radius </Label>
                     <div class="grid grid-cols-5 gap-2 py-1.5">
                       <Button
@@ -192,7 +280,7 @@ watch(radius, (radius) => {
                       </Button>
                     </div>
                   </div>
-                  <div class="space-y-1.5 pt-6">
+                  <div class="space-y-1.5 pt-4">
                     <Label for="theme" class="text-xs"> Theme </Label>
 
                     <div class="flex space-x-2 py-1.5">
@@ -216,6 +304,28 @@ watch(radius, (radius) => {
                       </Button>
                     </div>
                   </div>
+                  <div class="space-y-1.5 pt-4">
+                    <div class="flex">
+                      <div>
+                        <Label for="components" class="text-xs"> Alias (components) </Label>
+                        <div class="flex py-1.5">
+                          <input id="components" v-model.lazy="codeConfig.aliases.components" class="flex h-9 w-full rounded-s-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
+                        </div>
+                      </div>
+                      <div>
+                        <Label for="utils" class="text-xs"> Alias (utils) </Label>
+                        <div id="utils" class="flex py-1.5">
+                          <input v-model.lazy="codeConfig.aliases.utils" class="flex h-9 w-full rounded-e-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="space-y-1.5 pt-3">
+                    <Label for="radius" class="text-xs"> Prefix </Label>
+                    <div class="py-1.5">
+                      <input v-model.lazy="codeConfig.prefix" placeholder="Ui" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
+                    </div>
+                  </div>
                 </div>
               </PopoverContent>
             </Popover>
diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
index 451ab1d9..286447d3 100644
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/accordion
 primitive: https://www.radix-vue.com/components/accordion.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
 
@@ -52,20 +58,25 @@ module.exports = {
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
+import { 
+  {{codeConfig.prefix}}Accordion,
+  {{codeConfig.prefix}}AccordionContent,
+  {{codeConfig.prefix}}AccordionItem,
+  {{codeConfig.prefix}}AccordionTrigger 
+} from '{{codeConfig.aliases.components}}/ui/accordion'
 </script>
 
 <template>
-  <Accordion type="single" collapsible>
-    <AccordionItem value="item-1">
-      <AccordionTrigger>Is it accessible?</AccordionTrigger>
-      <AccordionContent>
+  <{{codeConfig.prefix}}Accordion type="single" collapsible>
+    <{{codeConfig.prefix}}AccordionItem value="item-1">
+      <{{codeConfig.prefix}}AccordionTrigger>Is it accessible?</{{codeConfig.prefix}}AccordionTrigger>
+      <{{codeConfig.prefix}}AccordionContent>
         Yes. It adheres to the WAI-ARIA design pattern.
-      </AccordionContent>
-    </AccordionItem>
-  </Accordion>
+      </{{codeConfig.prefix}}AccordionContent>
+    </{{codeConfig.prefix}}AccordionItem>
+  </{{codeConfig.prefix}}Accordion>
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/alert-dialog.md b/apps/www/src/content/docs/components/alert-dialog.md
index 73ea6da1..a35a37bd 100644
--- a/apps/www/src/content/docs/components/alert-dialog.md
+++ b/apps/www/src/content/docs/components/alert-dialog.md
@@ -4,51 +4,54 @@ description: A modal dialog that interrupts the user with important content and
 source: apps/www/src/lib/registry/default/ui/alert-dialog 
 primitive: https://www.radix-vue.com/components/alert-dialog.html
 ---
-    
- 
-<ComponentPreview name="AlertDialogDemo" />
- 
-## Installation
 
- 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+<ComponentPreview name="AlertDialogDemo" />
+
+## Installation
 
 ```bash
 npx shadcn-vue@latest add alert-dialog
 ```
-  
+
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog'
+  {{codeConfig.prefix}}AlertDialog,
+  {{codeConfig.prefix}}AlertDialogAction,
+  {{codeConfig.prefix}}AlertDialogCancel,
+  {{codeConfig.prefix}}AlertDialogContent,
+  {{codeConfig.prefix}}AlertDialogDescription,
+  {{codeConfig.prefix}}AlertDialogFooter,
+  {{codeConfig.prefix}}AlertDialogHeader,
+  {{codeConfig.prefix}}AlertDialogTitle,
+  {{codeConfig.prefix}}AlertDialogTrigger,
+} from '{{codeConfig.aliases.components}}/ui/alert-dialog'
 </script>
 
 <template>
-  <AlertDialog>
-    <AlertDialogTrigger>Open</AlertDialogTrigger>
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-        <AlertDialogDescription>
+  <{{codeConfig.prefix}}AlertDialog>
+    <{{codeConfig.prefix}}AlertDialogTrigger>Open</{{codeConfig.prefix}}AlertDialogTrigger>
+    <{{codeConfig.prefix}}AlertDialogContent>
+      <{{codeConfig.prefix}}AlertDialogHeader>
+        <{{codeConfig.prefix}}AlertDialogTitle>Are you absolutely sure?</{{codeConfig.prefix}}AlertDialogTitle>
+        <{{codeConfig.prefix}}AlertDialogDescription>
           This action cannot be undone. This will permanently delete your account
           and remove your data from our servers.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction>Continue</AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
+        </{{codeConfig.prefix}}AlertDialogDescription>
+      </{{codeConfig.prefix}}AlertDialogHeader>
+      <{{codeConfig.prefix}}AlertDialogFooter>
+        <{{codeConfig.prefix}}AlertDialogCancel>Cancel</{{codeConfig.prefix}}AlertDialogCancel>
+        <{{codeConfig.prefix}}AlertDialogAction>Continue</{{codeConfig.prefix}}AlertDialogAction>
+      </{{codeConfig.prefix}}AlertDialogFooter>
+    </{{codeConfig.prefix}}AlertDialogContent>
+  </{{codeConfig.prefix}}AlertDialog>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/alert.md b/apps/www/src/content/docs/components/alert.md
index 13d9d609..e02321ab 100644
--- a/apps/www/src/content/docs/components/alert.md
+++ b/apps/www/src/content/docs/components/alert.md
@@ -3,6 +3,11 @@ title: Alert
 description: Displays a callout for user attention.
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
 
 <ComponentPreview name="AlertDemo"  /> 
 
@@ -15,18 +20,18 @@ npx shadcn-vue@latest add alert
   
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { {{codeConfig.prefix}}Alert, {{codeConfig.prefix}}AlertDescription, {{codeConfig.prefix}}AlertTitle } from '{{codeConfig.aliases.components}}/ui/alert'
 </script>
 
 <template>
-  <Alert>
-    <AlertTitle>Heads up!</AlertTitle>
-    <AlertDescription>
+  <{{codeConfig.prefix}}Alert>
+    <{{codeConfig.prefix}}AlertTitle>Heads up!</{{codeConfig.prefix}}AlertTitle>
+    <{{codeConfig.prefix}}AlertDescription>
       You can add components to your app using the cli.
-    </AlertDescription>
-  </Alert>
+    </{{codeConfig.prefix}}AlertDescription>
+  </{{codeConfig.prefix}}Alert>
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/aspect-ratio.md b/apps/www/src/content/docs/components/aspect-ratio.md
index ec6475d9..ca6676d8 100644
--- a/apps/www/src/content/docs/components/aspect-ratio.md
+++ b/apps/www/src/content/docs/components/aspect-ratio.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/aspect-ratio
 primitive: https://www.radix-vue.com/components/aspect-ratio.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="AspectRatioDemo" />
 
@@ -39,16 +45,16 @@ npm install radix-vue
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { AspectRatio } from '@/components/ui/aspect-ratio'
+import { {{codeConfig.prefix}}AspectRatio } from '{{codeConfig.aliases.components}}/ui/aspect-ratio'
 </script>
 
 <template>
   <div class="w-[450px]">
-    <AspectRatio :ratio="16 / 9">
+    <{{codeConfig.prefix}}AspectRatio :ratio="16 / 9">
       <img src="..." alt="Image" class="rounded-md object-cover">
-    </AspectRatio>
+    </{{codeConfig.prefix}}AspectRatio>
   </div>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/avatar.md b/apps/www/src/content/docs/components/avatar.md
index 0f1dbdef..e9b5be39 100644
--- a/apps/www/src/content/docs/components/avatar.md
+++ b/apps/www/src/content/docs/components/avatar.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/avatar
 primitive: https://www.radix-vue.com/components/avatar.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="AvatarDemo" /> 
 
@@ -18,15 +24,15 @@ npx shadcn-vue@latest add avatar
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { {{codeConfig.prefix}}Avatar, {{codeConfig.prefix}}AvatarFallback, {{codeConfig.prefix}}AvatarImage } from '{{codeConfig.aliases.components}}/ui/avatar'
 </script>
 
 <template>
-  <Avatar>
-    <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
-    <AvatarFallback>CN</AvatarFallback>
-  </Avatar>
+  <{{codeConfig.prefix}}Avatar>
+    <{{codeConfig.prefix}}AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
+    <{{codeConfig.prefix}}AvatarFallback>CN</{{codeConfig.prefix}}AvatarFallback>
+  </{{codeConfig.prefix}}Avatar>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/badge.md b/apps/www/src/content/docs/components/badge.md
index 08b8b030..4c089b52 100644
--- a/apps/www/src/content/docs/components/badge.md
+++ b/apps/www/src/content/docs/components/badge.md
@@ -3,6 +3,12 @@ title: Badge
 description: Displays a badge or a component that looks like a badge.
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="BadgeDemo"  /> 
 
@@ -22,10 +28,10 @@ npx shadcn-vue@latest add badge
 
 ### Copy and paste the following code into your project
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import { type VariantProps, cva } from 'class-variance-authority'
-import { cn } from '@/lib/utils'
+import { cn } from '{{codeConfig.aliases.utils}}'
 
 defineProps<Props>()
 
@@ -70,13 +76,13 @@ interface Props {
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Badge } from '@/components/ui/badge'
+import { {{codeConfig.prefix}}Badge } from '{{codeConfig.aliases.components}}/ui/badge'
 </script>
 
 <template>
-  <Badge>Badge</Badge>
+  <{{codeConfig.prefix}}Badge>Badge</{{codeConfig.prefix}}Badge>
 </template>
 ```
 
@@ -98,4 +104,4 @@ import { Badge } from '@/components/ui/badge'
 
 ### Destructive
 
-<ComponentPreview name="BadgeDestructiveDemo" />
\ No newline at end of file
+<ComponentPreview name="BadgeDestructiveDemo" />
diff --git a/apps/www/src/content/docs/components/button.md b/apps/www/src/content/docs/components/button.md
index 3fb5d55e..6c1c3598 100644
--- a/apps/www/src/content/docs/components/button.md
+++ b/apps/www/src/content/docs/components/button.md
@@ -3,6 +3,12 @@ title: Button
 description: Displays a button or a component that looks like a button.
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="ButtonDemo"  /> 
 
@@ -22,10 +28,10 @@ npx shadcn-vue@latest add button
 
 ### Copy and paste the following code into your project
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import { cva } from 'class-variance-authority'
-import { cn } from '@/lib/utils'
+import { cn } from '{{codeConfig.aliases.utils}}'
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
@@ -84,13 +90,13 @@ withDefaults(defineProps<Props>(), {
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
+import { {{codeConfig.prefix}}Button } from '{{codeConfig.aliases.components}}/ui/button'
 </script>
 
 <template>
-  <Button>Button</Button>
+  <{{codeConfig.prefix}}Button>Button</{{codeConfig.prefix}}Button>
 </template>
 ```
 
@@ -138,4 +144,4 @@ import { Button } from '@/components/ui/button'
 
 ### As Child
 
-<ComponentPreview name="ButtonAsChildDemo" />
\ No newline at end of file
+<ComponentPreview name="ButtonAsChildDemo" />
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index 82301a24..3f71eecf 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -3,6 +3,12 @@ title: Calendar
 description: A date field component that allows users to enter and edit date.
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="CalendarDemo"  /> 
 
@@ -44,13 +50,13 @@ npm install v-calendar
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Calendar } from '@/components/ui/calendar'
+import { {{codeConfig.prefix}}Calendar } from '{{codeConfig.aliases.components}}/ui/calendar'
 </script>
 
 <template>
-  <Calendar />
+  <{{codeConfig.prefix}}Calendar />
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/card.md b/apps/www/src/content/docs/components/card.md
index 512d1761..8e48e8b4 100644
--- a/apps/www/src/content/docs/components/card.md
+++ b/apps/www/src/content/docs/components/card.md
@@ -3,6 +3,12 @@ title: Card
 description: Displays a card with header, content, and footer.
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="CardFormDemo"  /> 
 
@@ -16,34 +22,34 @@ npx shadcn-vue@latest add card
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
+  {{codeConfig.prefix}}Card,
+  {{codeConfig.prefix}}CardContent,
+  {{codeConfig.prefix}}CardDescription,
+  {{codeConfig.prefix}}CardFooter,
+  {{codeConfig.prefix}}CardHeader,
+  {{codeConfig.prefix}}CardTitle,
+} from '{{codeConfig.aliases.components}}/ui/card'
 </script>
 
 <template>
-  <Card>
-    <CardHeader>
-      <CardTitle>Card Title</CardTitle>
-      <CardDescription>Card Description</CardDescription>
-    </CardHeader>
-    <CardContent>
+  <{{codeConfig.prefix}}Card>
+    <{{codeConfig.prefix}}CardHeader>
+      <{{codeConfig.prefix}}CardTitle>Card Title</{{codeConfig.prefix}}CardTitle>
+      <{{codeConfig.prefix}}CardDescription>Card Description</{{codeConfig.prefix}}CardDescription>
+    </{{codeConfig.prefix}}CardHeader>
+    <{{codeConfig.prefix}}CardContent>
       Card Content
-    </CardContent>
-    <CardFooter>
+    </{{codeConfig.prefix}}CardContent>
+    <{{codeConfig.prefix}}CardFooter>
       Card Footer
-    </CardFooter>
-  </Card>
+    </{{codeConfig.prefix}}CardFooter>
+  </{{codeConfig.prefix}}Card>
 </template>
 ```
 
 ## Examples
 
-<ComponentPreview name="CardDemo"  /> 
\ No newline at end of file
+<ComponentPreview name="CardDemo"  /> 
diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md
index 07e24bfc..4a01c174 100644
--- a/apps/www/src/content/docs/components/checkbox.md
+++ b/apps/www/src/content/docs/components/checkbox.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/checkbox
 primitive: https://www.radix-vue.com/components/checkbox.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="CheckboxDemo"  /> 
 
@@ -18,13 +24,13 @@ npx shadcn-vue@latest add checkbox
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Checkbox } from '@/components/ui/checkbox'
+import { {{codeConfig.prefix}}Checkbox } from '{{codeConfig.aliases.components}}/ui/checkbox'
 </script>
 
 <template>
-  <Checkbox id="terms" />
+  <{{codeConfig.prefix}}Checkbox id="terms" />
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index 19f32739..cc928858 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/collapsible
 primitive: https://www.radix-vue.com/components/collapsible.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="CollapsibleDemo" /> 
 
@@ -52,25 +58,25 @@ module.exports = {
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import { ref } from 'vue'
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@/components/ui/collapsible'
+  {{codeConfig.prefix}}Collapsible,
+  {{codeConfig.prefix}}CollapsibleContent,
+  {{codeConfig.prefix}}CollapsibleTrigger,
+} from '{{codeConfig.aliases.components}}/ui/collapsible'
 
 const isOpen = ref(false)
 </script>
 
 <template>
-  <Collapsible v-model:open="isOpen">
-    <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
-    <CollapsibleContent>
+  <{{codeConfig.prefix}}Collapsible v-model:open="isOpen">
+    <{{codeConfig.prefix}}CollapsibleTrigger>Can I use this in my project?</{{codeConfig.prefix}}CollapsibleTrigger>
+    <{{codeConfig.prefix}}CollapsibleContent>
       Yes. Free to use for personal and commercial projects. No attribution
       required.
-    </CollapsibleContent>
-  </Collapsible>
+    </{{codeConfig.prefix}}CollapsibleContent>
+  </{{codeConfig.prefix}}Collapsible>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md
index 77ac9045..c99fcabc 100644
--- a/apps/www/src/content/docs/components/command.md
+++ b/apps/www/src/content/docs/components/command.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/command
 primitive: https://www.radix-vue.com/components/combobox.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="CommandDemo" /> 
 
@@ -18,51 +24,51 @@ npx shadcn-vue@latest add command
 ``` 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from '@/components/ui/command'
+  {{codeConfig.prefix}}Command,
+  {{codeConfig.prefix}}CommandDialog,
+  {{codeConfig.prefix}}CommandEmpty,
+  {{codeConfig.prefix}}CommandGroup,
+  {{codeConfig.prefix}}CommandInput,
+  {{codeConfig.prefix}}CommandItem,
+  {{codeConfig.prefix}}CommandList,
+  {{codeConfig.prefix}}CommandSeparator,
+  {{codeConfig.prefix}}CommandShortcut,
+} from '{{codeConfig.aliases.components}}/ui/command'
 </script>
 
 <template>
-  <Command>
-    <CommandInput placeholder="Type a command or search..." />
-    <CommandList>
-      <CommandEmpty>No results found.</CommandEmpty>
-      <CommandGroup heading="Suggestions">
-        <CommandItem value="calendar">
+  <{{codeConfig.prefix}}Command>
+    <{{codeConfig.prefix}}CommandInput placeholder="Type a command or search..." />
+    <{{codeConfig.prefix}}CommandList>
+      <{{codeConfig.prefix}}CommandEmpty>No results found.</{{codeConfig.prefix}}CommandEmpty>
+      <{{codeConfig.prefix}}CommandGroup heading="Suggestions">
+        <{{codeConfig.prefix}}CommandItem value="calendar">
           Calendar
-        </CommandItem>
-        <CommandItem value="search-emoji">
+        </{{codeConfig.prefix}}CommandItem>
+        <{{codeConfig.prefix}}CommandItem value="search-emoji">
           Search Emoji
-        </CommandItem>
-        <CommandItem value="calculator">
+        </{{codeConfig.prefix}}CommandItem>
+        <{{codeConfig.prefix}}CommandItem value="calculator">
           Calculator
-        </CommandItem>
-      </CommandGroup>
-      <CommandSeparator />
-      <CommandGroup heading="Settings">
-        <CommandItem value="profile">
+        </{{codeConfig.prefix}}CommandItem>
+      </{{codeConfig.prefix}}CommandGroup>
+      <{{codeConfig.prefix}}CommandSeparator />
+      <{{codeConfig.prefix}}CommandGroup heading="Settings">
+        <{{codeConfig.prefix}}CommandItem value="profile">
           Profile
-        </CommandItem>
-        <CommandItem value="billing">
+        </{{codeConfig.prefix}}CommandItem>
+        <{{codeConfig.prefix}}CommandItem value="billing">
           Billing
-        </CommandItem>
-        <CommandItem value="settings">
+        </{{codeConfig.prefix}}CommandItem>
+        <{{codeConfig.prefix}}CommandItem value="settings">
           Settings
-        </CommandItem>
-      </CommandGroup>
-    </CommandList>
-  </Command>
+        </{{codeConfig.prefix}}CommandItem>
+      </{{codeConfig.prefix}}CommandGroup>
+    </{{codeConfig.prefix}}CommandList>
+  </{{codeConfig.prefix}}Command>
 </template>
 ```
 
@@ -140,4 +146,4 @@ watch(CmdJ, (v) => {
 
 ### Combobox
 
-You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
\ No newline at end of file
+You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
diff --git a/apps/www/src/content/docs/components/context-menu.md b/apps/www/src/content/docs/components/context-menu.md
index 13bc11ec..f17a0b61 100644
--- a/apps/www/src/content/docs/components/context-menu.md
+++ b/apps/www/src/content/docs/components/context-menu.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/context-menu
 primitive: https://www.radix-vue.com/components/context-menu.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="ContextMenuDemo"  /> 
 
@@ -16,34 +22,34 @@ npx shadcn-vue@latest add context-menu
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from '@/components/ui/context-menu'
+  {{codeConfig.prefix}}ContextMenu,
+  {{codeConfig.prefix}}ContextMenuCheckboxItem,
+  {{codeConfig.prefix}}ContextMenuContent,
+  {{codeConfig.prefix}}ContextMenuItem,
+  {{codeConfig.prefix}}ContextMenuLabel,
+  {{codeConfig.prefix}}ContextMenuRadioGroup,
+  {{codeConfig.prefix}}ContextMenuRadioItem,
+  {{codeConfig.prefix}}ContextMenuSeparator,
+  {{codeConfig.prefix}}ContextMenuShortcut,
+  {{codeConfig.prefix}}ContextMenuSub,
+  {{codeConfig.prefix}}ContextMenuSubContent,
+  {{codeConfig.prefix}}ContextMenuSubTrigger,
+  {{codeConfig.prefix}}ContextMenuTrigger,
+} from '{{codeConfig.aliases.components}}/ui/context-menu'
 </script>
 
 <template>
-  <ContextMenu>
-    <ContextMenuTrigger>Right click</ContextMenuTrigger>
-    <ContextMenuContent>
-      <ContextMenuItem>Profile</ContextMenuItem>
-      <ContextMenuItem>Billing</ContextMenuItem>
-      <ContextMenuItem>Team</ContextMenuItem>
-      <ContextMenuItem>Subscription</ContextMenuItem>
-    </ContextMenuContent>
-  </ContextMenu>
+  <{{codeConfig.prefix}}ContextMenu>
+    <{{codeConfig.prefix}}ContextMenuTrigger>Right click</{{codeConfig.prefix}}ContextMenuTrigger>
+    <{{codeConfig.prefix}}ContextMenuContent>
+      <{{codeConfig.prefix}}ContextMenuItem>Profile</{{codeConfig.prefix}}ContextMenuItem>
+      <{{codeConfig.prefix}}ContextMenuItem>Billing</{{codeConfig.prefix}}ContextMenuItem>
+      <{{codeConfig.prefix}}ContextMenuItem>Team</{{codeConfig.prefix}}ContextMenuItem>
+      <{{codeConfig.prefix}}ContextMenuItem>Subscription</{{codeConfig.prefix}}ContextMenuItem>
+    </{{codeConfig.prefix}}ContextMenuContent>
+  </{{codeConfig.prefix}}ContextMenu>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index 43aef149..14e82794 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -3,6 +3,13 @@ title: Date Picker
 description: A date picker component with range and presets.
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 
 <ComponentPreview name="DatePickerDemo"  /> 
 
@@ -14,28 +21,28 @@ See installation instructions for the [Popover](/docs/components/popover#install
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import { format } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
 
 import { ref } from 'vue'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
+import { cn } from '{{codeConfig.aliases.utils}}'
+import { {{codeConfig.prefix}}Button } from '{{codeConfig.aliases.components}}/ui/button'
+import { {{codeConfig.prefix}}Calendar } from '{{codeConfig.aliases.components}}/ui/calendar'
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
+  {{codeConfig.prefix}}Popover,
+  {{codeConfig.prefix}}PopoverContent,
+  {{codeConfig.prefix}}PopoverTrigger,
+} from '{{codeConfig.aliases.components}}/ui/popover'
 
 const date = ref<Date>()
 </script>
 
 <template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
+  <{{codeConfig.prefix}}Popover>
+    <{{codeConfig.prefix}}PopoverTrigger as-child>
+      <{{codeConfig.prefix}}Button
         :variant="'outline'"
         :class="cn(
           'w-[280px] justify-start text-left font-normal',
@@ -44,12 +51,12 @@ const date = ref<Date>()
       >
         <CalendarIcon class="mr-2 h-4 w-4" />
         <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-auto p-0">
-      <Calendar v-model="date" />
-    </PopoverContent>
-  </Popover>
+      </{{codeConfig.prefix}}Button>
+    </{{codeConfig.prefix}}PopoverTrigger>
+    <{{codeConfig.prefix}}PopoverContent class="w-auto p-0">
+      <{{codeConfig.prefix}}Calendar v-model="date" />
+    </{{codeConfig.prefix}}PopoverContent>
+  </{{codeConfig.prefix}}Popover>
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index 05abcbef..273d031c 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/dialog
 primitive: https://www.radix-vue.com/components/dialog.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="DialogDemo" /> 
  
@@ -15,37 +21,37 @@ npx shadcn-vue@latest add dialog
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
+  {{codeConfig.prefix}}Dialog,
+  {{codeConfig.prefix}}DialogContent,
+  {{codeConfig.prefix}}DialogDescription,
+  {{codeConfig.prefix}}DialogFooter,
+  {{codeConfig.prefix}}DialogHeader,
+  {{codeConfig.prefix}}DialogTitle,
+  {{codeConfig.prefix}}DialogTrigger,
+} from '{{codeConfig.aliases.components}}/ui/dialog'
 </script>
 
 <template>
-  <Dialog>
-    <DialogTrigger>
+  <{{codeConfig.prefix}}Dialog>
+    <{{codeConfig.prefix}}DialogTrigger>
       Edit Profile
-    </DialogTrigger>
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>Edit profile</DialogTitle>
-        <DialogDescription>
+    </{{codeConfig.prefix}}DialogTrigger>
+    <{{codeConfig.prefix}}DialogContent>
+      <{{codeConfig.prefix}}DialogHeader>
+        <{{codeConfig.prefix}}DialogTitle>Edit profile</{{codeConfig.prefix}}DialogTitle>
+        <{{codeConfig.prefix}}DialogDescription>
           Make changes to your profile here. Click save when you're done.
-        </DialogDescription>
-      </DialogHeader>
+        </{{codeConfig.prefix}}DialogDescription>
+      </{{codeConfig.prefix}}DialogHeader>
 
-      <DialogFooter>
+      <{{codeConfig.prefix}}DialogFooter>
         Save changes
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
+      </{{codeConfig.prefix}}DialogFooter>
+    </{{codeConfig.prefix}}DialogContent>
+  </{{codeConfig.prefix}}Dialog>
 </template>
 ```
 
@@ -87,4 +93,4 @@ To activate the `Dialog` component from within a `Context Menu` or `Dropdown Men
     </DialogFooter>
   </DialogContent>
 </Dialog>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/dropdown-menu.md b/apps/www/src/content/docs/components/dropdown-menu.md
index 503461e4..c8b7be5a 100644
--- a/apps/www/src/content/docs/components/dropdown-menu.md
+++ b/apps/www/src/content/docs/components/dropdown-menu.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/dropdown-menu
 primitive: https://www.radix-vue.com/components/dropdown-menu.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="DropdownMenuDemo" /> 
 
@@ -15,29 +21,29 @@ npx shadcn-vue@latest add dropdown-menu
 ``` 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+  {{codeConfig.prefix}}DropdownMenu,
+  {{codeConfig.prefix}}DropdownMenuContent,
+  {{codeConfig.prefix}}DropdownMenuItem,
+  {{codeConfig.prefix}}DropdownMenuLabel,
+  {{codeConfig.prefix}}DropdownMenuSeparator,
+  {{codeConfig.prefix}}DropdownMenuTrigger,
+} from '{{codeConfig.aliases.components}}/ui/dropdown-menu'
 </script>
 
 <template>
-  <DropdownMenu>
-    <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuLabel>My Account</DropdownMenuLabel>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem>Profile</DropdownMenuItem>
-      <DropdownMenuItem>Billing</DropdownMenuItem>
-      <DropdownMenuItem>Team</DropdownMenuItem>
-      <DropdownMenuItem>Subscription</DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
+  <{{codeConfig.prefix}}DropdownMenu>
+    <{{codeConfig.prefix}}DropdownMenuTrigger>Open</{{codeConfig.prefix}}DropdownMenuTrigger>
+    <{{codeConfig.prefix}}DropdownMenuContent>
+      <{{codeConfig.prefix}}DropdownMenuLabel>My Account</{{codeConfig.prefix}}DropdownMenuLabel>
+      <{{codeConfig.prefix}}DropdownMenuSeparator />
+      <{{codeConfig.prefix}}DropdownMenuItem>Profile</{{codeConfig.prefix}}DropdownMenuItem>
+      <{{codeConfig.prefix}}DropdownMenuItem>Billing</{{codeConfig.prefix}}DropdownMenuItem>
+      <{{codeConfig.prefix}}DropdownMenuItem>Team</{{codeConfig.prefix}}DropdownMenuItem>
+      <{{codeConfig.prefix}}DropdownMenuItem>Subscription</{{codeConfig.prefix}}DropdownMenuItem>
+    </{{codeConfig.prefix}}DropdownMenuContent>
+  </{{codeConfig.prefix}}DropdownMenu>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md
index 04cff449..aec6cca1 100644
--- a/apps/www/src/content/docs/components/form.md
+++ b/apps/www/src/content/docs/components/form.md
@@ -3,6 +3,13 @@ title: VeeValidate
 description: Building forms with VeeValidate and Zod.
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.
 
 Well-designed HTML forms are:
@@ -35,19 +42,33 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
 
 ## Anatomy
 
-```vue
-<Form>
-  <FormField v-slot="{ ... }">
-    <FormItem>
-      <FormLabel />
-      <FormControl>
+```vue-vue
+<script setup lang="ts">
+import {
+  {{codeConfig.prefix}}Form,
+  {{codeConfig.prefix}}FormField,
+  {{codeConfig.prefix}}FormItem,
+  {{codeConfig.prefix}}FormLabel,
+  {{codeConfig.prefix}}FormControl,
+  {{codeConfig.prefix}}FormDescription,
+  {{codeConfig.prefix}}FormMessage,
+} from '{{codeConfig.aliases.components}}/ui/form'
+</script>
+```
+
+```vue-vue
+<{{codeConfig.prefix}}Form>
+  <{{codeConfig.prefix}}FormField v-slot="{ ... }">
+    <{{codeConfig.prefix}}FormItem>
+      <{{codeConfig.prefix}}FormLabel />
+      <{{codeConfig.prefix}}FormControl>
         <!-- any Form Input component or native input elements -->
-      </FormControl>
-      <FormDescription />
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</Form>
+      </{{codeConfig.prefix}}FormControl>
+      <{{codeConfig.prefix}}FormDescription />
+      <{{codeConfig.prefix}}FormMessage />
+    </{{codeConfig.prefix}}FormItem>
+  </{{codeConfig.prefix}}FormField>
+</{{codeConfig.prefix}}Form>
 ```
 
 ## Example
@@ -58,17 +79,17 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
 
 #### `Input` Component
 
-```vue
-<FormField v-slot="{ componentField }">
-  <FormItem>
-    <FormLabel>Username</FormLabel>
-    <FormControl>
-      <Input placeholder="shadcn" v-bind="componentField" />
-    </FormControl>
-    <FormDescription />
-    <FormMessage />
-  </FormItem>
-</FormField>
+```vue-vue
+<{{codeConfig.prefix}}FormField v-slot="{ componentField }">
+  <{{codeConfig.prefix}}FormItem>
+    <{{codeConfig.prefix}}FormLabel>Username</{{codeConfig.prefix}}FormLabel>
+    <{{codeConfig.prefix}}FormControl>
+      <{{codeConfig.prefix}}Input placeholder="shadcn" v-bind="componentField" />
+    </{{codeConfig.prefix}}FormControl>
+    <{{codeConfig.prefix}}FormDescription />
+    <{{codeConfig.prefix}}FormMessage />
+  </{{codeConfig.prefix}}FormItem>
+</{{codeConfig.prefix}}FormField>
 ```
 
 </template>
@@ -77,17 +98,17 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
 
 #### native `input` element
 
-```vue
-<FormField v-slot="{ field }">
-  <FormItem>
-    <FormLabel>Username</FormLabel>
-    <FormControl>
+```vue-vue
+<{{codeConfig.prefix}}FormField v-slot="{ field }">
+  <{{codeConfig.prefix}}FormItem>
+    <{{codeConfig.prefix}}FormLabel>Username</{{codeConfig.prefix}}FormLabel>
+    <{{codeConfig.prefix}}FormControl>
       <input placeholder="shadcn" v-bind="field" />
-    </FormControl>
-    <FormDescription />
-    <FormMessage />
-  </FormItem>
-</FormField>
+    </{{codeConfig.prefix}}FormControl>
+    <{{codeConfig.prefix}}FormDescription />
+    <{{codeConfig.prefix}}FormMessage />
+  </{{codeConfig.prefix}}FormItem>
+</{{codeConfig.prefix}}FormField>
 ```
 
 </template>
diff --git a/apps/www/src/content/docs/components/hover-card.md b/apps/www/src/content/docs/components/hover-card.md
index 6d58163d..c1342972 100644
--- a/apps/www/src/content/docs/components/hover-card.md
+++ b/apps/www/src/content/docs/components/hover-card.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/hover-card
 primitive: https://www.radix-vue.com/components/hover-card.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="HoverCardDemo" /> 
 
@@ -15,21 +21,21 @@ npx shadcn-vue@latest add hover-card
 ``` 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '@/components/ui/hover-card'
+  {{codeConfig.prefix}}HoverCard,
+  {{codeConfig.prefix}}HoverCardContent,
+  {{codeConfig.prefix}}HoverCardTrigger,
+} from '{{codeConfig.aliases.components}}/ui/hover-card'
 </script>
 
 <template>
-  <HoverCard>
-    <HoverCardTrigger>Hover</HoverCardTrigger>
-    <HoverCardContent>
+  <{{codeConfig.prefix}}HoverCard>
+    <{{codeConfig.prefix}}HoverCardTrigger>Hover</{{codeConfig.prefix}}HoverCardTrigger>
+    <{{codeConfig.prefix}}HoverCardContent>
       The Vue Framework – created and maintained by @vuejs.
-    </HoverCardContent>
-  </HoverCard>
+    </{{codeConfig.prefix}}HoverCardContent>
+  </{{codeConfig.prefix}}HoverCard>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index d1614790..91f8134c 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -3,6 +3,13 @@ title: Input
 description: Displays a form input field or a component that looks like an input field.
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 
 <ComponentPreview name="InputDemo" class="max-w-xs" /> 
 
@@ -33,13 +40,13 @@ npx shadcn-vue@latest add input
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Input } from '@/components/ui/input'
+import { {{codeConfig.prefix}}Input } from '{{codeConfig.aliases.components}}/ui/input'
 </script>
 
 <template>
-  <Input />
+  <{{codeConfig.prefix}}Input />
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/label.md b/apps/www/src/content/docs/components/label.md
index 9d2535c2..45b2a50d 100644
--- a/apps/www/src/content/docs/components/label.md
+++ b/apps/www/src/content/docs/components/label.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/label
 primitive: https://www.radix-vue.com/components/label.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="LabelDemo" /> 
 
 
@@ -39,12 +46,12 @@ npm install radix-vue
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Label } from '@/components/ui/label'
+import { {{codeConfig.prefix}}Label } from '{{codeConfig.aliases.components}}/ui/label'
 </script>
 
 <template>
-  <Label for="email">Your email address</Label>
+  <{{codeConfig.prefix}}Label for="email">Your email address</{{codeConfig.prefix}}Label>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/menubar.md b/apps/www/src/content/docs/components/menubar.md
index 8c856d82..185f4f2b 100644
--- a/apps/www/src/content/docs/components/menubar.md
+++ b/apps/www/src/content/docs/components/menubar.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/menubar
 primitive: https://www.radix-vue.com/components/menubar.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="MenubarDemo" /> 
 
 ## Installation
@@ -16,34 +23,34 @@ npx shadcn-vue@latest add menubar
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarTrigger,
-} from '@/components/ui/menubar'
+  {{codeConfig.prefix}}Menubar,
+  {{codeConfig.prefix}}MenubarContent,
+  {{codeConfig.prefix}}MenubarItem,
+  {{codeConfig.prefix}}MenubarMenu,
+  {{codeConfig.prefix}}MenubarSeparator,
+  {{codeConfig.prefix}}MenubarShortcut,
+  {{codeConfig.prefix}}MenubarTrigger,
+} from '{{codeConfig.aliases.components}}/ui/menubar'
 </script>
 
 <template>
-  <Menubar>
-    <MenubarMenu>
-      <MenubarTrigger>File</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>
-          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem>New Window</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>Share</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>Print</MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
+  <{{codeConfig.prefix}}Menubar>
+    <{{codeConfig.prefix}}MenubarMenu>
+      <{{codeConfig.prefix}}MenubarTrigger>File</{{codeConfig.prefix}}MenubarTrigger>
+      <{{codeConfig.prefix}}MenubarContent>
+        <{{codeConfig.prefix}}MenubarItem>
+          New Tab <{{codeConfig.prefix}}MenubarShortcut>⌘T</{{codeConfig.prefix}}MenubarShortcut>
+        </{{codeConfig.prefix}}MenubarItem>
+        <{{codeConfig.prefix}}MenubarItem>New Window</{{codeConfig.prefix}}MenubarItem>
+        <{{codeConfig.prefix}}MenubarSeparator />
+        <{{codeConfig.prefix}}MenubarItem>Share</{{codeConfig.prefix}}MenubarItem>
+        <{{codeConfig.prefix}}MenubarSeparator />
+        <{{codeConfig.prefix}}MenubarItem>Print</{{codeConfig.prefix}}MenubarItem>
+      </{{codeConfig.prefix}}MenubarContent>
+    </{{codeConfig.prefix}}MenubarMenu>
+  </{{codeConfig.prefix}}Menubar>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md
index 16669984..2cc349b8 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/navigation-menu
 primitive: https://www.radix-vue.com/components/navigation-menu.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="NavigationMenuDemo" /> 
 
 ## Installation 
@@ -15,31 +22,31 @@ npx shadcn-vue@latest add navigation-menu
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-} from '@/components/ui/navigation-menu'
+  {{codeConfig.prefix}}NavigationMenu,
+  {{codeConfig.prefix}}NavigationMenuContent,
+  {{codeConfig.prefix}}NavigationMenuIndicator,
+  {{codeConfig.prefix}}NavigationMenuItem,
+  {{codeConfig.prefix}}NavigationMenuLink,
+  {{codeConfig.prefix}}NavigationMenuList,
+  {{codeConfig.prefix}}NavigationMenuTrigger,
+  {{codeConfig.prefix}}NavigationMenuViewport,
+} from '{{codeConfig.aliases.components}}/ui/navigation-menu'
 </script>
 
 <template>
-  <NavigationMenu>
-    <NavigationMenuList>
-      <NavigationMenuItem>
-        <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
-        <NavigationMenuContent>
-          <NavigationMenuLink>Link</NavigationMenuLink>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-    </NavigationMenuList>
-  </NavigationMenu>
+  <{{codeConfig.prefix}}NavigationMenu>
+    <{{codeConfig.prefix}}NavigationMenuList>
+      <{{codeConfig.prefix}}NavigationMenuItem>
+        <{{codeConfig.prefix}}NavigationMenuTrigger>Item One</{{codeConfig.prefix}}NavigationMenuTrigger>
+        <{{codeConfig.prefix}}NavigationMenuContent>
+          <{{codeConfig.prefix}}NavigationMenuLink>Link</{{codeConfig.prefix}}NavigationMenuLink>
+        </{{codeConfig.prefix}}NavigationMenuContent>
+      </{{codeConfig.prefix}}NavigationMenuItem>
+    </{{codeConfig.prefix}}NavigationMenuList>
+  </{{codeConfig.prefix}}NavigationMenu>
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/popover.md b/apps/www/src/content/docs/components/popover.md
index 4a19b82e..17f9f996 100644
--- a/apps/www/src/content/docs/components/popover.md
+++ b/apps/www/src/content/docs/components/popover.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/popover
 primitive: https://www.radix-vue.com/components/popover.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 
 <ComponentPreview name="PopoverDemo" /> 
 
@@ -17,21 +24,21 @@ npx shadcn-vue@latest add popover
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
+  {{codeConfig.prefix}}Popover,
+  {{codeConfig.prefix}}PopoverContent,
+  {{codeConfig.prefix}}PopoverTrigger,
+} from '{{codeConfig.aliases.components}}/ui/popover'
 </script>
 
 <template>
-  <Popover>
-    <PopoverTrigger>
+  <{{codeConfig.prefix}}Popover>
+    <{{codeConfig.prefix}}PopoverTrigger>
       Open popover
-    </PopoverTrigger>
-    <PopoverContent />
-  </Popover>
+    </{{codeConfig.prefix}}PopoverTrigger>
+    <{{codeConfig.prefix}}PopoverContent>...</{{codeConfig.prefix}}PopoverContent>
+  </{{codeConfig.prefix}}Popover>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/progress.md b/apps/www/src/content/docs/components/progress.md
index bb1515a6..3e93328c 100644
--- a/apps/www/src/content/docs/components/progress.md
+++ b/apps/www/src/content/docs/components/progress.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/progress
 primitive: https://www.radix-vue.com/components/progress.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="ProgressDemo" /> 
 
 
@@ -40,12 +47,12 @@ npm install radix-vue
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Progress } from '@/components/ui/progress'
+import { {{codeConfig.prefix}}Progress } from '{{codeConfig.aliases.components}}/ui/progress'
 </script>
 
 <template>
-  <Progress :model-value="33" />
+  <{{codeConfig.prefix}}Progress :model-value="33" />
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index d7db0bc9..c958b613 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/radio-group
 primitive: https://www.radix-vue.com/components/radio-group.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="RadioGroupDemo" /> 
 
 ## Installation
@@ -16,23 +23,23 @@ npx shadcn-vue@latest add radio-group
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Label } from '@/components/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { {{codeConfig.prefix}}Label } from '{{codeConfig.aliases.components}}/ui/label'
+import { {{codeConfig.prefix}}RadioGroup, RadioGroupItem } from '{{codeConfig.aliases.components}}/ui/radio-group'
 </script>
 
 <template>
-  <RadioGroup default-value="option-one">
+  <{{codeConfig.prefix}}RadioGroup default-value="option-one">
     <div class="flex items-center space-x-2">
-      <RadioGroupItem id="option-one" value="option-one" />
-      <Label for="option-one">Option One</Label>
+      <{{codeConfig.prefix}}RadioGroupItem id="option-one" value="option-one" />
+      <{{codeConfig.prefix}}Label for="option-one">Option One</{{codeConfig.prefix}}Label>
     </div>
     <div class="flex items-center space-x-2">
-      <RadioGroupItem id="option-two" value="option-two" />
-      <Label for="option-two">Option Two</Label>
+      <{{codeConfig.prefix}}RadioGroupItem id="option-two" value="option-two" />
+      <{{codeConfig.prefix}}Label for="option-two">Option Two</{{codeConfig.prefix}}Label>
     </div>
-  </RadioGroup>
+  </{{codeConfig.prefix}}RadioGroup>
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/scroll-area.md b/apps/www/src/content/docs/components/scroll-area.md
index edac7a4c..e450a59d 100644
--- a/apps/www/src/content/docs/components/scroll-area.md
+++ b/apps/www/src/content/docs/components/scroll-area.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/scroll-area
 primitive: https://www.radix-vue.com/components/scroll-area.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="ScrollAreaDemo" /> 
 
 ## Installation
@@ -15,20 +22,20 @@ npx shadcn-vue@latest add scroll-area
 ```
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { {{codeConfig.prefix}}ScrollArea } from '{{codeConfig.aliases.components}}/ui/scroll-area'
 </script>
 
 <template>
-  <ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
+  <{{codeConfig.prefix}}ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
     Jokester began sneaking into the castle in the middle of the night and leaving
     jokes all over the place: under the king's pillow, in his soup, even in the
     royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
     then, one day, the people of the kingdom discovered that the jokes left by
     Jokester were so funny that they couldn't help but laugh. And once they
     started laughing, they couldn't stop.
-  </ScrollArea>
+  </{{codeConfig.prefix}}ScrollArea>
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md
index caae327d..a9941d83 100644
--- a/apps/www/src/content/docs/components/select.md
+++ b/apps/www/src/content/docs/components/select.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/select
 primitive: https://www.radix-vue.com/components/select.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="SelectDemo" /> 
 
@@ -17,33 +23,33 @@ npx shadcn-vue@latest add select
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
+  {{codeConfig.prefix}}Select,
+  {{codeConfig.prefix}}SelectContent,
+  {{codeConfig.prefix}}SelectGroup,
+  {{codeConfig.prefix}}SelectItem,
+  {{codeConfig.prefix}}SelectLabel,
+  {{codeConfig.prefix}}SelectTrigger,
+  {{codeConfig.prefix}}SelectValue,
+} from '{{codeConfig.aliases.components}}/ui/select'
 </script>
 
 <template>
-  <Select>
-    <SelectTrigger>
-      <SelectValue placeholder="Select a fruit" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectGroup>
-        <SelectLabel>Fruits</SelectLabel>
-        <SelectItem value="apple">
+  <{{codeConfig.prefix}}Select>
+    <{{codeConfig.prefix}}SelectTrigger>
+      <{{codeConfig.prefix}}SelectValue placeholder="Select a fruit" />
+    </{{codeConfig.prefix}}SelectTrigger>
+    <{{codeConfig.prefix}}SelectContent>
+      <{{codeConfig.prefix}}SelectGroup>
+        <{{codeConfig.prefix}}SelectLabel>Fruits</{{codeConfig.prefix}}SelectLabel>
+        <{{codeConfig.prefix}}SelectItem value="apple">
           Apple
-        </SelectItem>
-      </SelectGroup>
-    </SelectContent>
-  </Select>
+        </{{codeConfig.prefix}}SelectItem>
+      </{{codeConfig.prefix}}SelectGroup>
+    </{{codeConfig.prefix}}SelectContent>
+  </{{codeConfig.prefix}}Select>
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md
index 3e0bc281..14a679de 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/separator
 primitive: https://www.radix-vue.com/components/separator.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="SeparatorDemo" /> 
 
 
@@ -40,12 +47,12 @@ npm install radix-vue
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Separator } from '@/components/ui/separator'
+import { {{codeConfig.prefix}}Separator } from '{{codeConfig.aliases.components}}/ui/separator'
 </script>
 
 <template>
-  <Separator />
+  <{{codeConfig.prefix}}Separator />
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index 6a30c502..cba5b445 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/dialog
 primitive: https://www.radix-vue.com/components/dialog.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="SheetDemo" /> 
 
 
@@ -16,31 +23,31 @@ npx shadcn-vue@latest add sheet
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@/components/ui/sheet'
+  {{codeConfig.prefix}}Sheet,
+  {{codeConfig.prefix}}SheetContent,
+  {{codeConfig.prefix}}SheetDescription,
+  {{codeConfig.prefix}}SheetHeader,
+  {{codeConfig.prefix}}SheetTitle,
+  {{codeConfig.prefix}}SheetTrigger,
+} from '{{codeConfig.aliases.components}}/ui/sheet'
 </script>
 
 <template>
-  <Sheet>
-    <SheetTrigger>Open</SheetTrigger>
-    <SheetContent>
-      <SheetHeader>
-        <SheetTitle>Are you sure absolutely sure?</SheetTitle>
-        <SheetDescription>
+  <{{codeConfig.prefix}}Sheet>
+    <{{codeConfig.prefix}}SheetTrigger>Open</{{codeConfig.prefix}}SheetTrigger>
+    <{{codeConfig.prefix}}SheetContent>
+      <{{codeConfig.prefix}}SheetHeader>
+        <{{codeConfig.prefix}}SheetTitle>Are you sure absolutely sure?</{{codeConfig.prefix}}SheetTitle>
+        <{{codeConfig.prefix}}SheetDescription>
           This action cannot be undone. This will permanently delete your account
           and remove your data from our servers.
-        </SheetDescription>
-      </SheetHeader>
-    </SheetContent>
-  </Sheet>
+        </{{codeConfig.prefix}}SheetDescription>
+      </{{codeConfig.prefix}}SheetHeader>
+    </{{codeConfig.prefix}}SheetContent>
+  </{{codeConfig.prefix}}Sheet>
 </template>
 ```
 
@@ -72,4 +79,4 @@ You can adjust the size of the sheet using CSS classes:
     </SheetContent>
   </Sheet>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/skeleton.md b/apps/www/src/content/docs/components/skeleton.md
index af07e1b8..7a08c817 100644
--- a/apps/www/src/content/docs/components/skeleton.md
+++ b/apps/www/src/content/docs/components/skeleton.md
@@ -3,6 +3,13 @@ title: Skeleton
 description: Use to show a placeholder while content is loading. 
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="SkeletonDemo" /> 
 
 ## Installation
@@ -31,12 +38,12 @@ npx shadcn-vue@latest add skeleton
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Skeleton } from '@/components/ui/skeleton'
+import { {{codeConfig.prefix}}Skeleton } from '{{codeConfig.aliases.components}}/ui/skeleton'
 </script>
 
 <template>
-  <Skeleton class="w-[100px] h-[20px] rounded-full" />
+  <{{codeConfig.prefix}}Skeleton class="w-[100px] h-[20px] rounded-full" />
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/slider.md b/apps/www/src/content/docs/components/slider.md
index b0ee54f0..844feea9 100644
--- a/apps/www/src/content/docs/components/slider.md
+++ b/apps/www/src/content/docs/components/slider.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/slider
 primitive: https://www.radix-vue.com/components/slider.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="SliderDemo" /> 
 
 ## Installation
@@ -15,14 +22,12 @@ npx shadcn-vue@latest add slider
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Slider } from '@/components/ui/slider'
+import { {{codeConfig.prefix}}Slider } from '{{codeConfig.aliases.components}}/ui/slider'
 </script>
 
 <template>
-  <Slider
-    :default-value="[33]" :max="100" :step="1"
-  />
+  <{{codeConfig.prefix}}Slider :default-value="[33]" :max="100" :step="1" />
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index a359a4df..181e9873 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/switch
 primitive: https://www.radix-vue.com/components/switch.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="SwitchDemo" /> 
 
 
@@ -39,13 +46,13 @@ npm install radix-vue
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Switch } from '@/components/ui/switch'
+import { {{codeConfig.prefix}}Switch } from '{{codeConfig.aliases.components}}/ui/switch'
 </script>
 
 <template>
-  <Switch />
+  <{{codeConfig.prefix}}Switch />
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/table.md b/apps/www/src/content/docs/components/table.md
index e0701b58..73ea5b25 100644
--- a/apps/www/src/content/docs/components/table.md
+++ b/apps/www/src/content/docs/components/table.md
@@ -3,6 +3,13 @@ title: Table
 description: A responsive table component.
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="TableDemo" /> 
 
 
@@ -14,47 +21,47 @@ npx shadcn-vue@latest add table
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
+  {{codeConfig.prefix}}Table,
+  {{codeConfig.prefix}}TableBody,
+  {{codeConfig.prefix}}TableCaption,
+  {{codeConfig.prefix}}TableCell,
+  {{codeConfig.prefix}}TableHead,
+  {{codeConfig.prefix}}TableHeader,
+  {{codeConfig.prefix}}TableRow,
+} from '{{codeConfig.aliases.components}}/ui/table'
 </script>
 
 <template>
-  <Table>
-    <TableCaption>A list of your recent invoices.</TableCaption>
-    <TableHeader>
-      <TableRow>
-        <TableHead class="w-[100px]">
+  <{{codeConfig.prefix}}Table>
+    <{{codeConfig.prefix}}TableCaption>A list of your recent invoices.</{{codeConfig.prefix}}TableCaption>
+    <{{codeConfig.prefix}}TableHeader>
+      <{{codeConfig.prefix}}TableRow>
+        <{{codeConfig.prefix}}TableHead class="w-[100px]">
           Invoice
-        </TableHead>
-        <TableHead>Status</TableHead>
-        <TableHead>Method</TableHead>
-        <TableHead class="text-right">
+        </{{codeConfig.prefix}}TableHead>
+        <{{codeConfig.prefix}}TableHead>Status</{{codeConfig.prefix}}TableHead>
+        <{{codeConfig.prefix}}TableHead>Method</{{codeConfig.prefix}}TableHead>
+        <{{codeConfig.prefix}}TableHead class="text-right">
           Amount
-        </TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      <TableRow>
-        <TableCell class="font-medium">
+        </{{codeConfig.prefix}}TableHead>
+      </{{codeConfig.prefix}}TableRow>
+    </{{codeConfig.prefix}}TableHeader>
+    <{{codeConfig.prefix}}TableBody>
+      <{{codeConfig.prefix}}TableRow>
+        <{{codeConfig.prefix}}TableCell class="font-medium">
           INV001
-        </TableCell>
-        <TableCell>Paid</TableCell>
-        <TableCell>Credit Card</TableCell>
-        <TableCell class="text-right">
+        </{{codeConfig.prefix}}TableCell>
+        <{{codeConfig.prefix}}TableCell>Paid</{{codeConfig.prefix}}TableCell>
+        <{{codeConfig.prefix}}TableCell>Credit Card</{{codeConfig.prefix}}TableCell>
+        <{{codeConfig.prefix}}TableCell class="text-right">
           $250.00
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
+        </{{codeConfig.prefix}}TableCell>
+      </{{codeConfig.prefix}}TableRow>
+    </{{codeConfig.prefix}}TableBody>
+  </{{codeConfig.prefix}}Table>
 </template>
 ```
 
@@ -64,4 +71,4 @@ You can use the `<Table />` component to build more complex data tables. Combine
 
 See the [Data Table](/docs/components/data-table) documentation for more information.
 
-You can also see an example of a data table in the [Tasks](/examples/tasks) demo.
\ No newline at end of file
+You can also see an example of a data table in the [Tasks](/examples/tasks) demo.
diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md
index 317836e7..5b57cffc 100644
--- a/apps/www/src/content/docs/components/tabs.md
+++ b/apps/www/src/content/docs/components/tabs.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/tabs
 primitive: https://www.radix-vue.com/components/tabs.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="TabsDemo" /> 
 
 
@@ -18,27 +25,27 @@ npx shadcn-vue@latest add tabs
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { {{codeConfig.prefix}}Tabs, {{codeConfig.prefix}}TabsContent, {{codeConfig.prefix}}TabsList, {{codeConfig.prefix}}TabsTrigger } from '{{codeConfig.aliases.components}}/ui/tabs'
 </script>
 
 <template>
-  <Tabs default-value="account" class="w-[400px]">
-    <TabsList>
-      <TabsTrigger value="account">
+  <{{codeConfig.prefix}}Tabs default-value="account" class="w-[400px]">
+    <{{codeConfig.prefix}}TabsList>
+      <{{codeConfig.prefix}}TabsTrigger value="account">
         Account
-      </TabsTrigger>
-      <TabsTrigger value="password">
+      </{{codeConfig.prefix}}TabsTrigger>
+      <{{codeConfig.prefix}}TabsTrigger value="password">
         Password
-      </TabsTrigger>
-    </TabsList>
-    <TabsContent value="account">
+      </{{codeConfig.prefix}}TabsTrigger>
+    </{{codeConfig.prefix}}TabsList>
+    <{{codeConfig.prefix}}TabsContent value="account">
       Make changes to your account here.
-    </TabsContent>
-    <TabsContent value="password">
+    </{{codeConfig.prefix}}TabsContent>
+    <{{codeConfig.prefix}}TabsContent value="password">
       Change your password here.
-    </TabsContent>
-  </Tabs>
+    </{{codeConfig.prefix}}TabsContent>
+  </{{codeConfig.prefix}}Tabs>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md
index 930a7762..7141831a 100644
--- a/apps/www/src/content/docs/components/textarea.md
+++ b/apps/www/src/content/docs/components/textarea.md
@@ -3,6 +3,13 @@ title: Textarea
 description: Displays a form textarea or a component that looks like a textarea.
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="TextareaDemo" /> 
 
 
@@ -37,13 +44,13 @@ npm install radix-vue
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Textarea } from '@/components/ui/textarea'
+import { {{codeConfig.prefix}}Textarea } from '{{codeConfig.aliases.components}}/ui/textarea'
 </script>
 
 <template>
-  <Textarea />
+  <{{codeConfig.prefix}}Textarea />
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/toast.md b/apps/www/src/content/docs/components/toast.md
index fcba11d6..e72ed2ea 100644
--- a/apps/www/src/content/docs/components/toast.md
+++ b/apps/www/src/content/docs/components/toast.md
@@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/toast
 primitive: https://www.radix-vue.com/components/toast.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
 
 <ComponentPreview name="ToastDemo" />
 
@@ -40,20 +46,20 @@ import Toaster from '@/components/ui/toast/Toaster.vue'
 
 The `useToast` hook returns a `toast` function that you can use to display a toast.
 
-```tsx
-import { useToast } from '@/components/ui/toast/use-toast'
+```tsx-vue
+import { useToast } from '{{codeConfig.aliases.components}}/ui/toast/use-toast'
 ```
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import { useToast } from '@/components/ui/toast/use-toast'
+import { {{codeConfig.prefix}}Button } from '{{codeConfig.aliases.components}}/ui/button'
+import { useToast } from '{{codeConfig.aliases.components}}/ui/toast/use-toast'
 
 const { toast } = useToast()
 </script>
 
 <template>
-  <Button
+  <{{codeConfig.prefix}}Button
     @click="() => {
       toast({
         title: 'Scheduled: Catch up',
@@ -62,7 +68,7 @@ const { toast } = useToast()
     }"
   >
     Add to calander
-  </Button>
+  </{{codeConfig.prefix}}Button>
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md
index c720bb3e..3123c23a 100644
--- a/apps/www/src/content/docs/components/toggle.md
+++ b/apps/www/src/content/docs/components/toggle.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/toggle
 primitive: https://www.radix-vue.com/components/toggle.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="ToggleDemo" /> 
 
 
@@ -40,13 +47,13 @@ npm install radix-vue
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
-import { Toggle } from '@/components/ui/toggle'
+import { {{codeConfig.prefix}}Toggle } from '{{codeConfig.aliases.components}}/ui/toggle'
 </script>
 
 <template>
-  <Toggle>Toggle</Toggle>
+  <{{codeConfig.prefix}}Toggle>Toggle</{{codeConfig.prefix}}Toggle>
 </template>
 ```
 
diff --git a/apps/www/src/content/docs/components/tooltip.md b/apps/www/src/content/docs/components/tooltip.md
index 14108ed3..e287a07d 100644
--- a/apps/www/src/content/docs/components/tooltip.md
+++ b/apps/www/src/content/docs/components/tooltip.md
@@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/tooltip
 primitive: https://www.radix-vue.com/components/tooltip.html
 ---
 
+<script setup>
+import { useConfigStore } from '@/stores/config'
+
+const { codeConfig } = useConfigStore()
+</script>
+
+
 <ComponentPreview name="TooltipDemo" /> 
 
 
@@ -16,24 +23,24 @@ npx shadcn-vue@latest add tooltip
 
 ## Usage
 
-```vue
+```vue-vue
 <script setup lang="ts">
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from '@/components/ui/tooltip'
+  {{codeConfig.prefix}}Tooltip,
+  {{codeConfig.prefix}}TooltipContent,
+  {{codeConfig.prefix}}TooltipProvider,
+  {{codeConfig.prefix}}TooltipTrigger
+} from '{{codeConfig.aliases.components}}/ui/tooltip'
 </script>
 
 <template>
-  <TooltipProvider>
-    <Tooltip>
-      <TooltipTrigger>Hover</TooltipTrigger>
-      <TooltipContent>
+  <{{codeConfig.prefix}}TooltipProvider>
+    <{{codeConfig.prefix}}Tooltip>
+      <{{codeConfig.prefix}}TooltipTrigger>Hover</{{codeConfig.prefix}}TooltipTrigger>
+      <{{codeConfig.prefix}}TooltipContent>
         <p>Add to library</p>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
+      </{{codeConfig.prefix}}TooltipContent>
+    </{{codeConfig.prefix}}Tooltip>
+  </{{codeConfig.prefix}}TooltipProvider>
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/stores/config.ts b/apps/www/src/stores/config.ts
index dc3cc118..cc5e6d01 100644
--- a/apps/www/src/stores/config.ts
+++ b/apps/www/src/stores/config.ts
@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { useSessionStorage } from '@vueuse/core'
+import { useLocalStorage, useSessionStorage } from '@vueuse/core'
 import { useData } from 'vitepress'
 import { type Theme, themes } from './../lib/registry/themes'
 import { type Style, styles } from '@/lib/registry/styles'
@@ -14,12 +14,21 @@ export const RADII = [0, 0.25, 0.5, 0.75, 1]
 
 export function useConfigStore() {
   const { isDark } = useData()
-  const config = useSessionStorage<Config>('config', {
+
+  const config = useLocalStorage<Config>('config', {
     theme: 'zinc',
     radius: 0.5,
     style: styles[0].name,
   })
 
+  const codeConfig = useLocalStorage('code-config', {
+    prefix: '',
+    aliases: {
+      components: '@/components',
+      utils: '@/lib/utils',
+    },
+  })
+
   const themeClass = computed(() => `theme-${config.value.theme}`)
 
   const theme = computed(() => config.value.theme)
@@ -41,5 +50,5 @@ export function useConfigStore() {
     })`
   })
 
-  return { config, theme, setTheme, radius, setRadius, themeClass, style, themePrimary }
+  return { config, theme, setTheme, radius, setRadius, themeClass, style, themePrimary, codeConfig }
 }