diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 6a2af8cf..9caef3c0 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -11,5 +11,6 @@ module.exports = {
     'symbol-description': 'off',
     'no-console': 'warn',
     'no-tabs': 'off',
+    'no-invalid-character': 'off',
   },
 }
diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
index e664a141..dc0d658f 100644
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -31,15 +31,30 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
 </script>
 
-<AccordionRoot>
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It adheres to the WAI-ARIA design pattern.
-    </AccordionContent>
-  </AccordionItem>
-</AccordionRoot>
+<template>
+  <Accordion type="single" collapsible class="w-full">
+    <AccordionItem value="item-1">
+      <AccordionTrigger>Is it accessible?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It adheres to the WAI-ARIA design pattern.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="item-2">
+      <AccordionTrigger>Is it styled?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It comes with default styles that matches the other
+        components&apos; aesthetic.
+      </AccordionContent>
+    </AccordionItem>
+    <AccordionItem value="item-3">
+      <AccordionTrigger>Is it animated?</AccordionTrigger>
+      <AccordionContent>
+        Yes. It's animated by default, but you can disable it if you prefer.
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</template>
 ```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/alert-dialog.md b/apps/www/src/content/docs/components/alert-dialog.md
index b771eee8..e48bc4f7 100644
--- a/apps/www/src/content/docs/components/alert-dialog.md
+++ b/apps/www/src/content/docs/components/alert-dialog.md
@@ -42,7 +42,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from '@/lib/registry/default/ui/alert-dialog'
+} from '@/components/ui/alert-dialog'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/alert.md b/apps/www/src/content/docs/components/alert.md
index 958392a8..11433097 100644
--- a/apps/www/src/content/docs/components/alert.md
+++ b/apps/www/src/content/docs/components/alert.md
@@ -29,7 +29,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/aspect-ratio.md b/apps/www/src/content/docs/components/aspect-ratio.md
index e8285670..95443312 100644
--- a/apps/www/src/content/docs/components/aspect-ratio.md
+++ b/apps/www/src/content/docs/components/aspect-ratio.md
@@ -29,14 +29,14 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { AspectRatio } from '@/lib/registry/default/ui/aspect-ratio'
+import { AspectRatio } from '@/components/ui/aspect-ratio'
 </script>
 
 <template>
-  <AspectRatio>
-    <img
-      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-    >
-  </AspectRatio>
+  <div class="w-[450px]">
+    <AspectRatio :ratio="16 / 9">
+      <img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80">
+    </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 0f43e9b1..424a89c0 100644
--- a/apps/www/src/content/docs/components/avatar.md
+++ b/apps/www/src/content/docs/components/avatar.md
@@ -30,7 +30,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/badge.md b/apps/www/src/content/docs/components/badge.md
index 88d47894..adcf2cc6 100644
--- a/apps/www/src/content/docs/components/badge.md
+++ b/apps/www/src/content/docs/components/badge.md
@@ -28,7 +28,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Badge } from '@/lib/registry/default/ui/badge'
+import { Badge } from '@/components/ui/badge'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/button.md b/apps/www/src/content/docs/components/button.md
index a82c5ff3..5d635117 100644
--- a/apps/www/src/content/docs/components/button.md
+++ b/apps/www/src/content/docs/components/button.md
@@ -27,7 +27,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/components/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index 71ca6299..1227be84 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -31,7 +31,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Calendar } from '@/lib/registry/default/ui/calendar'
+import { Calendar } from '@/components/ui/calendar'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/card.md b/apps/www/src/content/docs/components/card.md
index 45d9c612..147b40a6 100644
--- a/apps/www/src/content/docs/components/card.md
+++ b/apps/www/src/content/docs/components/card.md
@@ -35,7 +35,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/default/ui/card'
+} from '@/components/ui/card'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md
index e128d4f6..b69a0b09 100644
--- a/apps/www/src/content/docs/components/checkbox.md
+++ b/apps/www/src/content/docs/components/checkbox.md
@@ -30,7 +30,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { Checkbox } from '@/components/ui/checkbox'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index 363e2914..f045c40b 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -31,24 +31,22 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
+import { ref } from 'vue'
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/lib/registry/default/ui/collapsible'
+} from '@/components/ui/collapsible'
 
 const isOpen = ref(false)
 </script>
 
 <template>
-  <Collapsible
-    v-model:open="isOpen"
-  >
-    <CollapsibleTrigger>
-      Trigger
-    </CollapsibleTrigger>
+  <Collapsible v-model:open="isOpen">
+    <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
     <CollapsibleContent>
-      Content
+      Yes. Free to use for personal and commercial projects. No attribution
+      required.
     </CollapsibleContent>
   </Collapsible>
 </template>
diff --git a/apps/www/src/content/docs/components/context-menu.md b/apps/www/src/content/docs/components/context-menu.md
index 92055710..467418d0 100644
--- a/apps/www/src/content/docs/components/context-menu.md
+++ b/apps/www/src/content/docs/components/context-menu.md
@@ -45,7 +45,7 @@ import {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-} from '@/lib/registry/default/ui/context-menu'
+} from '@/components/ui/context-menu'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index e9408747..4acfd90b 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -21,13 +21,13 @@ import { Calendar as CalendarIcon } from 'lucide-vue-next'
 
 import { ref } from 'vue'
 import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
+} from '@/components/ui/popover'
 
 const date = ref<Date>()
 </script>
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index d1f77f5c..10764c3e 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -38,7 +38,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/default/ui/dialog'
+} from '@/components/ui/dialog'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/dropdown-menu.md b/apps/www/src/content/docs/components/dropdown-menu.md
index 90029e71..935500f3 100644
--- a/apps/www/src/content/docs/components/dropdown-menu.md
+++ b/apps/www/src/content/docs/components/dropdown-menu.md
@@ -37,7 +37,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
+} from '@/components/ui/dropdown-menu'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/hover-card.md b/apps/www/src/content/docs/components/hover-card.md
index 5de02ad4..5be38160 100644
--- a/apps/www/src/content/docs/components/hover-card.md
+++ b/apps/www/src/content/docs/components/hover-card.md
@@ -34,14 +34,14 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@/lib/registry/default/ui/hover-card'
+} from '@/components/ui/hover-card'
 </script>
 
 <template>
   <HoverCard>
     <HoverCardTrigger>Hover</HoverCardTrigger>
     <HoverCardContent>
-      The React Framework – created and maintained by @vercel.
+      The Vue Framework – created and maintained by @vuejs.
     </HoverCardContent>
   </HoverCard>
 </template>
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index 4748760a..e473e9a6 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -29,7 +29,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Input } from '@/lib/registry/default/ui/input'
+import { Input } from '@/components/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/label.md b/apps/www/src/content/docs/components/label.md
index 0dbb4791..1a2fdec7 100644
--- a/apps/www/src/content/docs/components/label.md
+++ b/apps/www/src/content/docs/components/label.md
@@ -11,7 +11,7 @@ primitive: https://www.radix-vue.com/components/label.html
 ## Installation
 
 ```bash
-npx shadcn-vue@latest add input
+npx shadcn-vue@latest add label
 ```
 
 <ManualInstall>
@@ -29,7 +29,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
+import { Label } from '@/components/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/menubar.md b/apps/www/src/content/docs/components/menubar.md
index 628d4d96..4fa7c17c 100644
--- a/apps/www/src/content/docs/components/menubar.md
+++ b/apps/www/src/content/docs/components/menubar.md
@@ -38,7 +38,7 @@ import {
   MenubarSeparator,
   MenubarShortcut,
   MenubarTrigger,
-} from '@/lib/registry/default/ui/menubar'
+} from '@/components/ui/menubar'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md
index 5f89cbd9..4b564e55 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -38,7 +38,7 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
   NavigationMenuViewport,
-} from '@/lib/registry/default/ui/navigation-menu'
+} from '@/components/ui/navigation-menu'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/popover.md b/apps/www/src/content/docs/components/popover.md
index c987f86d..dfac75b2 100644
--- a/apps/www/src/content/docs/components/popover.md
+++ b/apps/www/src/content/docs/components/popover.md
@@ -35,7 +35,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
+} from '@/components/ui/popover'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/progress.md b/apps/www/src/content/docs/components/progress.md
index 17cca0a4..e1853db2 100644
--- a/apps/www/src/content/docs/components/progress.md
+++ b/apps/www/src/content/docs/components/progress.md
@@ -30,7 +30,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Progress } from '@/lib/registry/default/ui/progress'
+import { Progress } from '@/components/ui/progress'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index d8321ad3..6d006cd2 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -30,8 +30,8 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Label } from '@/lib/registry/default/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
+import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/scroll-area.md b/apps/www/src/content/docs/components/scroll-area.md
index 3ef661ef..152a877f 100644
--- a/apps/www/src/content/docs/components/scroll-area.md
+++ b/apps/www/src/content/docs/components/scroll-area.md
@@ -30,7 +30,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
+import { ScrollArea } from '@/components/ui/scroll-area'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md
index 5922573e..3de388b6 100644
--- a/apps/www/src/content/docs/components/select.md
+++ b/apps/www/src/content/docs/components/select.md
@@ -39,7 +39,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
+} from '@/components/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md
index 28d291b2..bee269cf 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -30,7 +30,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Separator } from '@/lib/registry/default/ui/separator'
+import { Separator } from '@/components/ui/separator'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index 3e287968..3cb6415a 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -36,7 +36,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '@/lib/registry/default/ui/sheet'
+} from '@/components/ui/sheet'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/skeleton.md b/apps/www/src/content/docs/components/skeleton.md
index c596c686..3d138c91 100644
--- a/apps/www/src/content/docs/components/skeleton.md
+++ b/apps/www/src/content/docs/components/skeleton.md
@@ -27,7 +27,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Skeleton } from '@/lib/registry/default/ui/skeleton'
+import { Skeleton } from '@/components/ui/skeleton'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/slider.md b/apps/www/src/content/docs/components/slider.md
index e2b74980..f9da8915 100644
--- a/apps/www/src/content/docs/components/slider.md
+++ b/apps/www/src/content/docs/components/slider.md
@@ -30,7 +30,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Slider } from '@/lib/registry/default/ui/slider'
+import { Slider } from '@/components/ui/slider'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index 95147d5d..3d97c017 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -29,7 +29,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Switch } from '@/lib/registry/default/ui/switch'
+import { Switch } from '@/components/ui/switch'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/table.md b/apps/www/src/content/docs/components/table.md
index 5bb6213f..1e7a76be 100644
--- a/apps/www/src/content/docs/components/table.md
+++ b/apps/www/src/content/docs/components/table.md
@@ -35,7 +35,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/lib/registry/default/ui/table'
+} from '@/components/ui/table'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md
index ab8138a0..394211e9 100644
--- a/apps/www/src/content/docs/components/tabs.md
+++ b/apps/www/src/content/docs/components/tabs.md
@@ -29,7 +29,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md
index ca10f22d..5334b124 100644
--- a/apps/www/src/content/docs/components/textarea.md
+++ b/apps/www/src/content/docs/components/textarea.md
@@ -27,7 +27,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Textarea } from '@/components/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md
index 279edd87..6f74afa9 100644
--- a/apps/www/src/content/docs/components/toggle.md
+++ b/apps/www/src/content/docs/components/toggle.md
@@ -30,7 +30,7 @@ npm install radix-vue
 
 ```vue
 <script setup lang="ts">
-import { Toggle } from '@/lib/registry/default/ui/toggle'
+import { Toggle } from '@/components/ui/toggle'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/tooltip.md b/apps/www/src/content/docs/components/tooltip.md
index cdd08aa8..02d5b570 100644
--- a/apps/www/src/content/docs/components/tooltip.md
+++ b/apps/www/src/content/docs/components/tooltip.md
@@ -34,7 +34,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
-} from '@/lib/registry/default/ui/tooltip'
+} from '@/components/ui/tooltip'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
index a39c9af3..442c2bf5 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
@@ -4,13 +4,13 @@ import { ref } from 'vue'
 import RadixIconsCalendar from '~icons/radix-icons/calendar'
 
 import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
+} from '@/components/ui/popover'
 
 const date = ref<Date>()
 </script>