docs: improve the installation section for each component

.eslintrc.cjs

@@ -11,5 +11,6 @@ module.exports = {
     'symbol-description': 'off',
     'no-console': 'warn',
     'no-tabs': 'off',
+    'no-invalid-character': 'off',
   },
 }

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>
 ```

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>

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>

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>
 ```

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>