From 34ca4e34d83aa677c38b580b43cd05d8bf560e0e Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 15:13:10 +0530
Subject: [PATCH] feat: add the default carousel component to the docs

---
 .../src/content/docs/components/carousel.md   | 61 +++++++++++++++++++
 apps/www/src/public/registry/index.json       | 16 +++++
 2 files changed, 77 insertions(+)
 create mode 100644 apps/www/src/content/docs/components/carousel.md

diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md
new file mode 100644
index 00000000..40ef113b
--- /dev/null
+++ b/apps/www/src/content/docs/components/carousel.md
@@ -0,0 +1,61 @@
+---
+title: Carousel
+description: A carousel with motion and swipe built using Embla.
+source: apps/www/src/lib/registry/default/ui/carousel 
+primitive: https://www.embla-carousel.com/api
+---
+
+
+<ComponentPreview name="CarouselDemo"  /> 
+
+
+## About
+
+The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/) library.
+
+## Installation
+ 
+
+```bash
+npx shadcn-vue@latest add carousel
+``` 
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@/components/ui/carousel'
+</script>
+
+<template>
+  <Carousel>
+    <CarouselContent>
+      <CarouselItem>...</CarouselItem>
+      <CarouselItem>...</CarouselItem>
+      <CarouselItem>...</CarouselItem>
+    </CarouselContent>
+    <CarouselPrevious />
+    <CarouselNext />
+  </Carousel>
+</template>
+```
+
+## Examples
+
+### Orientation
+
+Use the `orientation` prop to set the orientation of the carousel.
+
+<ComponentPreview name="CarouselOrientation" />
+
+```vue
+<Carousel orientation="vertical | horizontal">
+  ...
+</Carousel>
+```
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index ac75677f..03efdce1 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -130,6 +130,22 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "carousel",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      "ui/carousel/Carousel.vue",
+      "ui/carousel/CarouselContent.vue",
+      "ui/carousel/CarouselItem.vue",
+      "ui/carousel/CarouselNext.vue",
+      "ui/carousel/CarouselPrev.vue",
+      "ui/carousel/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "checkbox",
     "dependencies": [],