docs: fix carousel page responsive issues and ordering docs as shadcn-ui

apps/www/.vitepress/theme/components/ComponentPreview.vue

@@ -52,7 +52,7 @@ const { style } = useConfigStore()
           </div>
         </div>
         <div
-          :class="cn('preview flex min-h-[350px] w-full justify-center p-6 lg:p-10', {
+          :class="cn('preview flex min-h-[350px] w-full justify-center p-10 items-center', {
             'items-center': align === 'center',
             'items-start': align === 'start',
             'items-end': align === 'end',

apps/www/src/content/docs/components/carousel.md

@@ -48,18 +48,6 @@ import {
 
 ## Examples
 
-### Orientation
-
-Use the `orientation` prop to set the orientation of the carousel.
-
-<ComponentPreview name="CarouselOrientation" />
-
-```vue
-<Carousel orientation="vertical | horizontal">
-  ...
-</Carousel>
-```
-
 ### Sizes
 
 To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
@@ -151,6 +139,17 @@ Responsive
 </template>
 ```
 
+### Orientation
+
+Use the `orientation` prop to set the orientation of the carousel.
+
+<ComponentPreview name="CarouselOrientation" />
+
+```vue
+<Carousel orientation="vertical | horizontal">
+  ...
+</Carousel>
+```
 
 ## Options
 

apps/www/src/lib/registry/default/example/CarouselApi.vue

@@ -27,8 +27,8 @@ watchOnce(api, (api) => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center space-x-2">
+  <div class="w-full sm:w-auto">
-    <Carousel class="w-full max-w-xs" @init-api="setApi">
+    <Carousel class="relative w-full max-w-xs" @init-api="setApi">
       <CarouselContent>
         <CarouselItem v-for="(_, index) in 5" :key="index">
           <div class="p-1">

apps/www/src/lib/registry/default/example/CarouselDemo.vue

@@ -4,8 +4,7 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <Carousel class="relative w-full max-w-xs">
-    <Carousel class="w-full max-w-xs">
     <CarouselContent>
       <CarouselItem v-for="(_, index) in 5" :key="index">
         <div class="p-1">
@@ -20,5 +19,4 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

apps/www/src/lib/registry/default/example/CarouselOrientation.vue

@@ -4,10 +4,9 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="w-1/2">
   <Carousel
     orientation="vertical"
-      class="w-full max-w-xs"
+    class="relative w-full max-w-xsw-full max-w-xs"
     :opts="{
       align: 'start',
     }"
@@ -26,5 +25,4 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

apps/www/src/lib/registry/default/example/CarouselPlugin.vue

@@ -11,9 +11,8 @@ const plugin = Autoplay({
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
-      class="w-full max-w-xs"
+    class="relative w-full max-w-xs"
     :plugins="[plugin]"
     @mouseenter="plugin.stop"
     @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
@@ -32,5 +31,4 @@ const plugin = Autoplay({
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

apps/www/src/lib/registry/default/example/CarouselSize.vue

@@ -4,9 +4,8 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
-      class="w-full max-w-xs"
+    class="relative w-full max-w-sm"
     :opts="{
       align: 'start',
     }"
@@ -25,5 +24,4 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

apps/www/src/lib/registry/default/example/CarouselSpacing.vue

@@ -4,9 +4,8 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
-      class="w-full max-w-sm"
+    class="relative w-full max-w-sm"
     :opts="{
       align: 'start',
     }"
@@ -25,5 +24,4 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

apps/www/src/lib/registry/new-york/example/CarouselApi.vue

@@ -27,8 +27,8 @@ watchOnce(api, (api) => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center space-x-2">
+  <div class="w-full sm:w-auto">
-    <Carousel class="w-full max-w-xs" @init-api="setApi">
+    <Carousel class="relative w-full max-w-xs" @init-api="setApi">
       <CarouselContent>
         <CarouselItem v-for="(_, index) in 5" :key="index">
           <div class="p-1">

apps/www/src/lib/registry/new-york/example/CarouselDemo.vue

@@ -4,8 +4,7 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <Carousel class="relative w-full max-w-xs">
-    <Carousel class="w-full max-w-xs">
     <CarouselContent>
       <CarouselItem v-for="(_, index) in 5" :key="index">
         <div class="p-1">
@@ -20,5 +19,4 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue

@@ -4,10 +4,9 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="w-1/2">
   <Carousel
     orientation="vertical"
-      class="w-full max-w-xs"
+    class="relative w-full max-w-xs"
     :opts="{
       align: 'start',
     }"
@@ -26,5 +25,4 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue

@@ -11,9 +11,8 @@ const plugin = Autoplay({
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
-      class="w-full max-w-xs"
+    class="relative w-full max-w-xs"
     :plugins="[plugin]"
     @mouseenter="plugin.stop"
     @mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
@@ -32,5 +31,4 @@ const plugin = Autoplay({
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

apps/www/src/lib/registry/new-york/example/CarouselSize.vue

@@ -4,9 +4,8 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
-      class="w-full max-w-xs"
+    class="relative w-full max-w-xs"
     :opts="{
       align: 'start',
     }"
@@ -25,5 +24,4 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>

apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue

@@ -4,7 +4,6 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
   <Carousel
     class="w-full max-w-sm"
     :opts="{
@@ -25,5 +24,4 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
     <CarouselPrevious />
     <CarouselNext />
   </Carousel>
-  </div>
 </template>