diff --git a/packages/ui-react/lib/Carousel/Carousel.stories.tsx b/packages/ui-react/lib/Carousel/Carousel.stories.tsx
index 0ff3edd..0580b55 100644
--- a/packages/ui-react/lib/Carousel/Carousel.stories.tsx
+++ b/packages/ui-react/lib/Carousel/Carousel.stories.tsx
@@ -47,9 +47,10 @@ export const DefaultCarousel: Story = {
       { children: <div style={styles}>4</div> },
       { children: <div style={styles}>5</div> },
     ],
-    onChange: test,
+    onchange: test,
     defaultSelected: 2,
     selected: 1,
+    className: 'test',
   },
 };
 
diff --git a/packages/ui-react/lib/Carousel/Carousel.tsx b/packages/ui-react/lib/Carousel/Carousel.tsx
index a1ba5d1..3ff0890 100644
--- a/packages/ui-react/lib/Carousel/Carousel.tsx
+++ b/packages/ui-react/lib/Carousel/Carousel.tsx
@@ -1,9 +1,9 @@
-import React, { memo, useEffect, useRef, useState } from 'react';
+import React, { memo, useEffect, useRef, useState, type HtmlHTMLAttributes } from 'react';
 import { type CarouselItemProps, CarouselItem } from '..';
 import classNames from 'classnames';
 import styles from './Carousel.module.scss';
 
-export interface CarouselProps {
+export interface CarouselProps extends HtmlHTMLAttributes<HTMLDivElement> {
   /**
    * width of the carousel
    */
@@ -19,7 +19,7 @@ export interface CarouselProps {
   /**
    * onChange : the onChange of the Carousel
    */
-  onChange?: (value: number) => void;
+  onchange?: (value: number) => void;
   /**
    * defaultselect the defaultselect of the Carousel
    */
@@ -44,10 +44,11 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
       width = 400,
       CarouselItems = undefined,
       height,
-      onChange,
+      onchange,
       defaultSelected,
       selected,
       isSliding = true,
+      ...rest
     },
     ref,
   ) => {
@@ -121,8 +122,8 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
     };
 
     useEffect(() => {
-      onChange && onChange(select);
-    }, [select, onChange]);
+      onchange && onchange(select);
+    }, [select, onchange]);
 
     useEffect(() => {
       if (difference === 0 && !isChanged) {
@@ -167,6 +168,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
         className={carouselClass}
         ref={ref}
         style={{ width: `${width}px`, height: `${height}px` }}
+        {...rest}
       >
         <div
           className={styles['carouselAll']}
diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
index a97f953..11fbc68 100644
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui-aurora/react",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A React UI library built for SASTOJ",
   "author": "sast",
   "license": "MIT",