diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue
index 15e64f7f..d483a6a4 100644
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -336,6 +336,7 @@ defineExpose({
           <button
             :aria-label="t('carousel.goto', { slide: index + 1 })"
             :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            :data-state="selectedIndex === index ? 'active' : undefined"
             @click="scrollTo(index)"
           />
         </template>
diff --git a/src/theme/carousel.ts b/src/theme/carousel.ts
index aa36e386..2a249518 100644
--- a/src/theme/carousel.ts
+++ b/src/theme/carousel.ts
@@ -30,7 +30,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     active: {
       true: {
-        dot: 'bg-inverted'
+        dot: 'data-[state=active]:bg-inverted'
       }
     }
   }