diff --git a/package.json b/package.json
index 0e2a204..e6efe8d 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
   "dependencies": {
     "@rc-component/trigger": "^3.6.15",
     "@rc-component/util": "^1.3.0",
-    "classnames": "^2.3.1"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
@@ -61,11 +61,11 @@
     "father": "^4.0.0",
     "gh-pages": "^3.1.0",
     "less": "^4.1.1",
+    "prettier": "^3.6.2",
     "rc-test": "^7.0.9",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "typescript": "^4.0.5",
-    "prettier": "^3.6.2"
+    "typescript": "^4.0.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
diff --git a/src/Popup.tsx b/src/Popup.tsx
index d01a355..b4966b5 100644
--- a/src/Popup.tsx
+++ b/src/Popup.tsx
@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { TooltipProps } from './Tooltip';
 
@@ -18,7 +18,7 @@ const Popup: React.FC<ContentProps> = (props) => {
   return (
     <div
       id={id}
-      className={cls(`${prefixCls}-container`, classNames?.container, className)}
+      className={clsx(`${prefixCls}-container`, classNames?.container, className)}
       style={{ ...styles?.container, ...style }}
       role="tooltip"
     >
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index 4a4884f..4808238 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -2,7 +2,7 @@ import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger'
 import Trigger from '@rc-component/trigger';
 import type { ActionType, AlignType } from '@rc-component/trigger/lib/interface';
 import useId from '@rc-component/util/lib/hooks/useId';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { useImperativeHandle, useRef } from 'react';
 import { placements } from './placements';
@@ -106,7 +106,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     // Apply semantic styles with unified logic
     return {
       ...arrowConfig,
-      className: cls(arrowConfig.className, classNames?.arrow),
+      className: clsx(arrowConfig.className, classNames?.arrow),
       style: { ...arrowConfig.style, ...styles?.arrow },
       content: arrowConfig.content ?? arrowContent,
     };