diff --git a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
index 969ae969..b6147c27 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useProvideCarousel } from './useCarousel'
-import type { CarouselEmits, CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<CarouselProps>(), {
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
   orientation: 'horizontal',
 })
 
@@ -33,7 +33,7 @@ function onKeyDown(event: KeyboardEvent) {
 
 <template>
   <div
-    :class="cn('relative', $attrs.class ?? '')"
+    :class="cn('relative', props.class)"
     role="region"
     aria-roledescription="carousel"
     tabindex="0"
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
index 7d141430..6e87fdeb 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { WithClassAsProps } from './interface'
 import { useCarousel } from './useCarousel'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<WithClassAsProps>()
+
 const { carouselRef, orientation } = useCarousel()
 </script>
 
@@ -12,7 +15,7 @@ const { carouselRef, orientation } = useCarousel()
         cn(
           'flex',
           orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          $attrs.class ?? '',
+          props.class,
         )"
     >
       <slot />
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
index 5ff44c57..53ea50da 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { WithClassAsProps } from './interface'
 import { useCarousel } from './useCarousel'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation } = useCarousel()
 </script>
 
@@ -12,7 +15,7 @@ const { orientation } = useCarousel()
     :class="cn(
       'min-w-0 shrink-0 grow-0 basis-full',
       orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-      $attrs.class ?? '',
+      props.class,
     )"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
index 2c4c34b7..67faba07 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ChevronRight } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation, canScrollNext, scrollNext } = useCarousel()
 </script>
 
@@ -15,7 +18,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
       orientation === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
         : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      $attrs.class ?? '',
+      props.class,
     )"
     variant="outline"
     @click="scrollNext"
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
index 0e99d96b..c64b3d92 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ChevronLeft } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation, canScrollPrev, scrollPrev } = useCarousel()
 </script>
 
@@ -15,7 +18,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
       orientation === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
         : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      $attrs.class ?? '',
+      props.class,
     )"
     variant="outline"
     @click="scrollPrev"
diff --git a/apps/www/src/lib/registry/default/ui/carousel/interface.ts b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
index 3cc55714..68521ddb 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
@@ -3,6 +3,7 @@ import type {
   EmblaOptionsType as CarouselOptions,
   EmblaPluginType as CarouselPlugin,
 } from 'embla-carousel'
+import type { HTMLAttributes } from 'vue'
 
 export interface CarouselProps {
   opts?: CarouselOptions
@@ -13,3 +14,7 @@ export interface CarouselProps {
 export interface CarouselEmits {
   (e: 'init-api', payload: CarouselApi): void
 }
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes['class']
+}
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
index 969ae969..b6147c27 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useProvideCarousel } from './useCarousel'
-import type { CarouselEmits, CarouselProps } from './interface'
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<CarouselProps>(), {
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
   orientation: 'horizontal',
 })
 
@@ -33,7 +33,7 @@ function onKeyDown(event: KeyboardEvent) {
 
 <template>
   <div
-    :class="cn('relative', $attrs.class ?? '')"
+    :class="cn('relative', props.class)"
     role="region"
     aria-roledescription="carousel"
     tabindex="0"
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
index 7d141430..06f82555 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<WithClassAsProps>()
+
 const { carouselRef, orientation } = useCarousel()
 </script>
 
@@ -12,7 +15,7 @@ const { carouselRef, orientation } = useCarousel()
         cn(
           'flex',
           orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          $attrs.class ?? '',
+          props.class,
         )"
     >
       <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
index 5ff44c57..801e5c16 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation } = useCarousel()
 </script>
 
@@ -12,7 +15,7 @@ const { orientation } = useCarousel()
     :class="cn(
       'min-w-0 shrink-0 grow-0 basis-full',
       orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-      $attrs.class ?? '',
+      props.class,
     )"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
index 37ca9f24..d237434b 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation, canScrollNext, scrollNext } = useCarousel()
 </script>
 
@@ -15,7 +18,7 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
       orientation === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
         : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      $attrs.class ?? '',
+      props.class,
     )"
     variant="outline"
     @click="scrollNext"
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
index 91c8389b..2018027a 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ChevronLeftIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
 
+const props = defineProps<WithClassAsProps>()
+
 const { orientation, canScrollPrev, scrollPrev } = useCarousel()
 </script>
 
@@ -15,7 +18,7 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
       orientation === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
         : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      $attrs.class ?? '',
+      props.class,
     )"
     variant="outline"
     @click="scrollPrev"
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
index 3cc55714..68521ddb 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
@@ -3,6 +3,7 @@ import type {
   EmblaOptionsType as CarouselOptions,
   EmblaPluginType as CarouselPlugin,
 } from 'embla-carousel'
+import type { HTMLAttributes } from 'vue'
 
 export interface CarouselProps {
   opts?: CarouselOptions
@@ -13,3 +14,7 @@ export interface CarouselProps {
 export interface CarouselEmits {
   (e: 'init-api', payload: CarouselApi): void
 }
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes['class']
+}