diff --git a/package.json b/package.json
index 1666252..fc85538 100644
--- a/package.json
+++ b/package.json
@@ -1,76 +1,73 @@
 {
-  "name": "soda-material",
-  "version": "0.0.26",
-  "type": "module",
-  "types": "dist",
-  "main": "dist/index.js",
-  "style": "dist/style.css",
-  "sideEffects": false,
-  "scripts": {
-    "build": "vite build && tsc",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "format": "prettier --write ./src",
-    "preview": "vite preview",
-    "chromatic": "chromatic --exit-zero-on-changes"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "devDependencies": {
-    "@floating-ui/react": "^0.26.10",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
-    "@material/material-color-utilities": "^0.2.7",
-    "@mdi/js": "^7.4.47",
-    "@mdi/react": "^1.6.1",
-    "@storybook/addon-essentials": "^8.0.5",
-    "@storybook/addon-interactions": "^8.0.5",
-    "@storybook/addon-links": "^8.0.5",
-    "@storybook/blocks": "^8.0.5",
-    "@storybook/react": "^8.0.5",
-    "@storybook/react-vite": "^8.0.5",
-    "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.23",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "chromatic": "^11.3.0",
-    "clsx": "^2.1.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "eslint-plugin-storybook": "^0.8.0",
-    "glob": "^10.3.12",
-    "prettier": "^3.2.5",
-    "sass": "^1.72.0",
-    "storybook": "^8.0.5",
-    "styled-jsx": "^5.1.2",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.7"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
-  "description": "Modern lightweight React Component Library",
-  "keywords": [
-    "material design",
-    "material you"
-  ],
-  "author": {
-    "name": "YieldRay"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/YieldRay/soda.git"
-  },
-  "bugs": {
-    "url": "https://github.com/YieldRay/soda/issues"
-  },
-  "homepage": "https://github.com/YieldRay/soda#readme",
-  "dependencies": {
-    "@storybook/test": "8.0.5"
-  }
+    "name": "soda-material",
+    "version": "0.0.26",
+    "type": "module",
+    "types": "dist",
+    "main": "dist/index.js",
+    "style": "dist/style.css",
+    "sideEffects": false,
+    "scripts": {
+        "build": "vite build && tsc",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "format": "prettier --write ./src",
+        "preview": "vite preview",
+        "chromatic": "chromatic --exit-zero-on-changes"
+    },
+    "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+    },
+    "devDependencies": {
+        "@floating-ui/react": "^0.26.12",
+        "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+        "@material/material-color-utilities": "^0.2.7",
+        "@mdi/js": "^7.4.47",
+        "@mdi/react": "^1.6.1",
+        "@storybook/addon-essentials": "^8.0.9",
+        "@storybook/addon-interactions": "^8.0.9",
+        "@storybook/addon-links": "^8.0.9",
+        "@storybook/blocks": "^8.0.9",
+        "@storybook/react": "^8.0.9",
+        "@storybook/react-vite": "^8.0.9",
+        "@types/react": "^18.2.79",
+        "@types/react-dom": "^18.2.25",
+        "@typescript-eslint/eslint-plugin": "^7.7.1",
+        "@typescript-eslint/parser": "^7.7.1",
+        "@vitejs/plugin-react": "^4.2.1",
+        "chromatic": "^11.3.0",
+        "clsx": "^2.1.1",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.6",
+        "eslint-plugin-storybook": "^0.8.0",
+        "glob": "^10.3.12",
+        "prettier": "^3.2.5",
+        "sass": "^1.75.0",
+        "storybook": "^8.0.9",
+        "styled-jsx": "^5.1.2",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.10"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org"
+    },
+    "description": "Modern lightweight React Component Library",
+    "keywords": [
+        "material design",
+        "material you"
+    ],
+    "author": {
+        "name": "YieldRay"
+    },
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/YieldRay/soda.git"
+    },
+    "bugs": {
+        "url": "https://github.com/YieldRay/soda/issues"
+    },
+    "homepage": "https://github.com/YieldRay/soda#readme"
 }
diff --git a/src/components/app-bar/BottomAppBar.tsx b/src/components/app-bar/BottomAppBar.tsx
index 5ebbfa4..c2aab97 100644
--- a/src/components/app-bar/BottomAppBar.tsx
+++ b/src/components/app-bar/BottomAppBar.tsx
@@ -6,6 +6,7 @@ import { ExtendProps } from '@/utils/type'
 
 /**
  * `<BottomAppBar>` has fixed style `height: 80px`
+ *
  * @specs https://m3.material.io/components/bottom-app-bar/specs
  */
 export const BottomAppBar = forwardRef<
diff --git a/src/components/app-bar/TopAppBar.tsx b/src/components/app-bar/TopAppBar.tsx
index 4816fd4..f2f5082 100644
--- a/src/components/app-bar/TopAppBar.tsx
+++ b/src/components/app-bar/TopAppBar.tsx
@@ -5,7 +5,6 @@ import { mergeStyles } from '@/utils/style'
 import { ExtendProps } from '@/utils/type'
 
 /**
- *
  * @specs https://m3.material.io/components/top-app-bar/specs
  */
 export const TopAppBar = forwardRef<
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index 37e0440..5e8b2d3 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -6,6 +6,7 @@ import { ExtendProps, TagNameString } from '@/utils/type'
 
 /**
  * You can set the `disabled` property to disable ripple
+ *
  * @specs https://m3.material.io/components/cards/specs
  */
 export const Card = forwardRef<
diff --git a/src/components/carousel/Carousel.stories.tsx b/src/components/carousel/Carousel.stories.tsx
index e55aa1b..532b254 100644
--- a/src/components/carousel/Carousel.stories.tsx
+++ b/src/components/carousel/Carousel.stories.tsx
@@ -14,7 +14,7 @@ export const Default: Story = {
     args: {
         items: new Array(6).fill(0).map((_, i) => ({
             value: (
-                <img src={`https://placekitten.com/200/${(i + 2) * 50}`}></img>
+                <img src={`https://picsum.photos/200/300?random=${i}`}></img>
             ),
             label: `Cat ${i + 1}`,
         })),
diff --git a/src/components/carousel/Carousel.tsx b/src/components/carousel/Carousel.tsx
index b92697d..b448361 100644
--- a/src/components/carousel/Carousel.tsx
+++ b/src/components/carousel/Carousel.tsx
@@ -15,7 +15,8 @@ interface ItemWithFlex extends Item {
 
 /**
  * [warn]: Incomplete implementation, and only three visible items is implemented,
- * make sure the array length is multiple of 3, or it will throw error
+ * make sure the array length is multiple of 3
+ *
  * @specs https://m3.material.io/components/carousel/specs
  */
 export const Carousel = forwardRef<
@@ -35,8 +36,7 @@ export const Carousel = forwardRef<
     { items: initItems, height, className, style, ...props },
     ref,
 ) {
-    if (initItems.length % 3 !== 0)
-        throw new Error('the item array length must be a multiple of 3')
+    initItems.slice(0, initItems.length - (initItems.length % 3)) // make sure the array length is multiple of 3
     const [items, setItems] = useState(initFlex(initItems))
     const containerRef = useRef<HTMLDivElement>(null)
     useImperativeHandle(ref, () => containerRef.current!)
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
index e6b9059..1a2d0cc 100644
--- a/src/components/checkbox/Checkbox.tsx
+++ b/src/components/checkbox/Checkbox.tsx
@@ -12,6 +12,7 @@ import { ExtendProps } from '@/utils/type'
 /**
  * According to the official implementation, the ripple effect should not occupy space.
  * Therefore, if the parent container has `overflow: hidden`, make sure that there is enough area to show the ripple effect.
+ *
  * @specs https://m3.material.io/components/checkbox/specs
  */
 export const Checkbox = forwardRef<
diff --git a/src/components/divider/Divider.tsx b/src/components/divider/Divider.tsx
index 4fa0952..c446056 100644
--- a/src/components/divider/Divider.tsx
+++ b/src/components/divider/Divider.tsx
@@ -5,6 +5,7 @@ import { ExtendProps } from '@/utils/type'
 
 /**
  * The divider has margin included by default, you can remove it by adding `style={{margin:"0"}}`
+ *
  * @specs https://m3.material.io/components/divider/specs
  */
 export const Divider = forwardRef<
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 1fa23c3..b2bb3a1 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -5,6 +5,7 @@ import { ExtendProps } from '@/utils/type'
 
 /**
  * The `<Menu>` container, will contain `<MenuItem>` and `<Divider>` components
+ *
  * @specs https://m3.material.io/components/menus/specs
  */
 export const Menu = forwardRef<
diff --git a/src/components/progress-indicator/LinearProgressIndicator.tsx b/src/components/progress-indicator/LinearProgressIndicator.tsx
index 88327e6..6f792bc 100644
--- a/src/components/progress-indicator/LinearProgressIndicator.tsx
+++ b/src/components/progress-indicator/LinearProgressIndicator.tsx
@@ -7,6 +7,7 @@ import { ExtendProps } from '@/utils/type'
 /**
  * [notice]: This component has default `min-width: 5rem` and `width: 100%` for convenience.
  * You can manually set style property to override it if needed.
+ *
  * @specs https://m3.material.io/components/progress-indicators/specs#efada034-defe-401e-803a-e6ea2833a396
  */
 export const LinearProgressIndicator = forwardRef<
diff --git a/src/components/radio-button/RadioButton.tsx b/src/components/radio-button/RadioButton.tsx
index a075178..abc31ed 100644
--- a/src/components/radio-button/RadioButton.tsx
+++ b/src/components/radio-button/RadioButton.tsx
@@ -9,6 +9,7 @@ import { ExtendProps } from '@/utils/type'
 /**
  * According to the official implementation, the ripple effect should not occupy space.
  * Therefore, if the parent container has `overflow: hidden`, make sure that there is enough area to show the ripple effect.
+ *
  * @specs https://m3.material.io/components/radio-button/specs
  */
 export const RadioButton = forwardRef<
diff --git a/src/components/sheet/BottomSheet.tsx b/src/components/sheet/BottomSheet.tsx
index a7c3e8a..5b52698 100644
--- a/src/components/sheet/BottomSheet.tsx
+++ b/src/components/sheet/BottomSheet.tsx
@@ -17,6 +17,7 @@ export type BottomSheetHandle = ReturnType<typeof attachDragEvent>
  *
  * This component use ref to control show and hide,
  * you can call `ref.current.show()` to show and `ref.current.hide()` to hide
+ *
  * @specs https://m3.material.io/components/bottom-sheets/specs
  */
 export const BottomSheet = forwardRef<
diff --git a/src/components/slider/Slider.tsx b/src/components/slider/Slider.tsx
index f84b001..317f00d 100644
--- a/src/components/slider/Slider.tsx
+++ b/src/components/slider/Slider.tsx
@@ -19,6 +19,7 @@ import { ExtendProps } from '@/utils/type'
  * An slider component, note that you should set width or height (use `style` property) for this component!
  *
  * TODO: Two handles is not implemented yet!
+ *
  * @specs https://m3.material.io/components/sliders/specs
  */
 export const Slider = forwardRef<
diff --git a/src/components/tooltip/RichTooltip.tsx b/src/components/tooltip/RichTooltip.tsx
index 5f0f5bd..a7d9d8a 100644
--- a/src/components/tooltip/RichTooltip.tsx
+++ b/src/components/tooltip/RichTooltip.tsx
@@ -6,6 +6,7 @@ import { ExtendProps } from '@/utils/type'
 
 /**
  * [tips]: You may consider manually add `<br />`
+ *
  * @specs https://m3.material.io/components/tooltips/specs
  */
 export const RichTooltip = forwardRef<