+You can always adjust this in your own project if you need to.
+
+
+
+
+
+Example
+
+```vue showLineNumbers /-ml-4/ /pl-4/
+
+
+
+
+ ...
+
+
+ ...
+
+
+ ...
+
+
+
+
+```
+
+Responsive
+
+```vue showLineNumbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/
+
+
+
+
+ ...
+
+
+ ...
+
+
+ ...
+
+
+
+
+```
+
+
+## Options
+
+You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.
+
+```vue showLineNumbers {3-6}
+
+
+
+ ...
+ ...
+ ...
+
+
+
+```
+
+## API
+
+### Method 1
+
+Use the `@init-api` emit method on `` component to set the instance of the API.
+
+
+
+### Method 2
+
+You can access it through setting a template ref on the `` component.
+
+```vue showLineNumbers {2,5,9}
+
+
+
+
+ ...
+
+
+```
+
+## Events
+
+You can listen to events using the API. To get the API instance use the `@init-api` emit method on the `` component
+
+```vue showLineNumbers {5,7-9,25}
+
+
+
+
+ ...
+
+
+```
+
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
+
+## Slot Props
+
+You can get the reactive slot props like `carouselRef, canScrollNext..Prev, scrollNext..Prev` using the `v-slot` directive in the `` component to extend the functionality.
+
+```vue showLineNumbers {2}
+
+
+ ...
+
+
+
+
+```
+
+## Plugins
+
+You can use the `plugins` prop to add plugins to the carousel.
+
+```bash
+npm i embla-carousel-autoplay
+```
+
+
+```vue showLineNumbers {2,8-10}
+
+
+
+
+ ...
+
+
+```
+
+
+
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
\ No newline at end of file
diff --git a/apps/www/src/lib/registry/default/example/CarouselApi.vue b/apps/www/src/lib/registry/default/example/CarouselApi.vue
new file mode 100644
index 000000000..0b25dc948
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CarouselApi.vue
@@ -0,0 +1,51 @@
+
+
+
+