diff --git a/.gitignore b/.gitignore
index 0ea0494..7595468 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ lib
 es
 coverage
 package-lock.json
+pnpm-lock.yaml
 yarn.lock
 .doc
 .umi
diff --git a/package.json b/package.json
index 9177018..cef5e8b 100644
--- a/package.json
+++ b/package.json
@@ -52,16 +52,16 @@
     ]
   },
   "dependencies": {
-    "classnames": "^2.2.3",
-    "@rc-component/util": "^1.2.1"
+    "@rc-component/util": "^1.2.1",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.2",
     "@rc-component/np": "^1.0.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.6",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^29.4.0",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@umijs/fabric": "^4.0.1",
diff --git a/src/Rail.tsx b/src/Rail.tsx
index 5850146..103aab7 100644
--- a/src/Rail.tsx
+++ b/src/Rail.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import type { Status } from './Steps';
 
 export interface RailProps {
@@ -14,5 +14,5 @@ export default function Rail(props: RailProps) {
   const railCls = `${prefixCls}-rail`;
 
   // ============================= render =============================
-  return <div className={cls(railCls, `${railCls}-${status}`, className)} style={style} />;
+  return <div className={clsx(railCls, `${railCls}-${status}`, className)} style={style} />;
 }
diff --git a/src/Step.tsx b/src/Step.tsx
index 1ee6078..2d2cd00 100644
--- a/src/Step.tsx
+++ b/src/Step.tsx
@@ -1,6 +1,6 @@
 /* eslint react/prop-types: 0 */
 import * as React from 'react';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import type { Status, StepItem, StepsProps } from './Steps';
 import Rail from './Rail';
@@ -126,7 +126,7 @@ export default function Step(props: StepProps) {
   const hasTitle = hasContent(title);
   const hasSubTitle = hasContent(subTitle);
 
-  const classString = cls(
+  const classString = clsx(
     itemCls,
     `${itemCls}-${mergedStatus}`,
     {
@@ -152,11 +152,8 @@ export default function Step(props: StepProps) {
 
   const wrapperNode = (
     <div
-      className={cls(`${itemCls}-wrapper`, classNames.itemWrapper, itemClassNames.wrapper)}
-      style={{
-        ...styles.itemWrapper,
-        ...itemStyles.wrapper,
-      }}
+      className={clsx(`${itemCls}-wrapper`, classNames.itemWrapper, itemClassNames.wrapper)}
+      style={{ ...styles.itemWrapper, ...itemStyles.wrapper }}
     >
       {/* Icon */}
       <StepIconSemanticContext.Provider
@@ -169,26 +166,17 @@ export default function Step(props: StepProps) {
       </StepIconSemanticContext.Provider>
 
       <div
-        className={cls(`${itemCls}-section`, classNames.itemSection, itemClassNames.section)}
-        style={{
-          ...styles.itemSection,
-          ...itemStyles.section,
-        }}
+        className={clsx(`${itemCls}-section`, classNames.itemSection, itemClassNames.section)}
+        style={{ ...styles.itemSection, ...itemStyles.section }}
       >
         <div
-          className={cls(`${itemCls}-header`, classNames.itemHeader, itemClassNames.header)}
-          style={{
-            ...styles.itemHeader,
-            ...itemStyles.header,
-          }}
+          className={clsx(`${itemCls}-header`, classNames.itemHeader, itemClassNames.header)}
+          style={{ ...styles.itemHeader, ...itemStyles.header }}
         >
           {hasTitle && (
             <div
-              className={cls(`${itemCls}-title`, classNames.itemTitle, itemClassNames.title)}
-              style={{
-                ...styles.itemTitle,
-                ...itemStyles.title,
-              }}
+              className={clsx(`${itemCls}-title`, classNames.itemTitle, itemClassNames.title)}
+              style={{ ...styles.itemTitle, ...itemStyles.title }}
             >
               {title}
             </div>
@@ -196,15 +184,12 @@ export default function Step(props: StepProps) {
           {hasSubTitle && (
             <div
               title={typeof subTitle === 'string' ? subTitle : undefined}
-              className={cls(
+              className={clsx(
                 `${itemCls}-subtitle`,
                 classNames.itemSubtitle,
                 itemClassNames.subtitle,
               )}
-              style={{
-                ...styles.itemSubtitle,
-                ...itemStyles.subtitle,
-              }}
+              style={{ ...styles.itemSubtitle, ...itemStyles.subtitle }}
             >
               {subTitle}
             </div>
@@ -213,18 +198,15 @@ export default function Step(props: StepProps) {
           {!last && (
             <Rail
               prefixCls={itemCls}
-              className={cls(classNames.itemRail, itemClassNames.rail)}
-              style={{
-                ...styles.itemRail,
-                ...itemStyles.rail,
-              }}
+              className={clsx(classNames.itemRail, itemClassNames.rail)}
+              style={{ ...styles.itemRail, ...itemStyles.rail }}
               status={railFollowPrevStatus ? status : nextStatus}
             />
           )}
         </div>
         {hasContent(mergedContent) && (
           <div
-            className={cls(`${itemCls}-content`, classNames.itemContent, itemClassNames.content)}
+            className={clsx(`${itemCls}-content`, classNames.itemContent, itemClassNames.content)}
             style={{ ...styles.itemContent, ...itemStyles.content }}
           >
             {mergedContent}
diff --git a/src/StepIcon.tsx b/src/StepIcon.tsx
index ea2bd07..fce6a63 100644
--- a/src/StepIcon.tsx
+++ b/src/StepIcon.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import { StepsContext } from './Context';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 
@@ -24,12 +24,8 @@ const StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>((props, ref) =>
     <div
       {...pickAttrs(restProps, false)}
       ref={ref}
-      className={cls(`${itemCls}-icon`, classNames.itemIcon, itemClassName, className)}
-      style={{
-        ...styles.itemIcon,
-        ...itemStyle,
-        ...style,
-      }}
+      className={clsx(`${itemCls}-icon`, classNames.itemIcon, itemClassName, className)}
+      style={{ ...styles.itemIcon, ...itemStyle, ...style }}
     >
       {children}
     </div>
diff --git a/src/Steps.tsx b/src/Steps.tsx
index fdedc56..0cf4cca 100644
--- a/src/Steps.tsx
+++ b/src/Steps.tsx
@@ -1,5 +1,5 @@
 /* eslint react/no-did-mount-set-state: 0, react/prop-types: 0 */
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import Step from './Step';
 import { StepsContext, type StepsContextProps } from './Context';
@@ -140,7 +140,7 @@ export default function Steps(props: StepsProps) {
     !isVertical && titlePlacement === 'vertical' ? 'vertical' : 'horizontal';
 
   // ============================= styles =============================
-  const classString = cls(
+  const classString = clsx(
     prefixCls,
     `${prefixCls}-${mergedOrientation}`,
     `${prefixCls}-title-${mergeTitlePlacement}`,