diff --git a/src/TourStep/DefaultPanel.tsx b/src/TourStep/DefaultPanel.tsx
index 3eb01a4..6baa7aa 100644
--- a/src/TourStep/DefaultPanel.tsx
+++ b/src/TourStep/DefaultPanel.tsx
@@ -30,7 +30,7 @@ export default function DefaultPanel(props: DefaultPanelProps) {
   const mergedClosable = !!closable;
 
   return (
-    <div className={classNames(`${prefixCls}-pannel`, className)}>
+    <div className={classNames(`${prefixCls}-panel`, className)}>
       <div
         className={classNames(`${prefixCls}-section`, tourClassNames?.section)}
         style={styles?.section}
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index f4c6b02..c589d37 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -100,7 +100,7 @@ exports[`Tour animated placeholder true 1`] = `
         style="position: absolute;"
       />
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -253,7 +253,7 @@ exports[`Tour animated true 1`] = `
         style="position: absolute;"
       />
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -545,7 +545,7 @@ exports[`Tour rootClassName 1`] = `
         style="position: absolute;"
       />
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -661,7 +661,7 @@ exports[`Tour run in strict mode 1`] = `
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -829,7 +829,7 @@ exports[`Tour run in strict mode 2`] = `
         style="position: absolute;"
       />
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -947,7 +947,7 @@ exports[`Tour should keep current when controlled 1`] = `
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -1065,7 +1065,7 @@ exports[`Tour should return step 1 when reopen 1`] = `
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -1227,7 +1227,7 @@ exports[`Tour should update position when window resize 1`] = `
         style="position: absolute;"
       />
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -1382,7 +1382,7 @@ exports[`Tour should update position when window scroll 1`] = `
         style="position: absolute;"
       />
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -1531,7 +1531,7 @@ exports[`Tour showArrow should show tooltip arrow default 1`] = `
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
     >
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -1684,7 +1684,7 @@ exports[`Tour single 1`] = `
         style="position: absolute;"
       />
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -1839,7 +1839,7 @@ exports[`Tour use custom builtinPlacements 1`] = `
         style="position: absolute;"
       />
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -1994,7 +1994,7 @@ exports[`Tour use custom builtinPlacements 2`] = `
         style="position: absolute;"
       />
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"
@@ -2160,7 +2160,7 @@ exports[`Tour use custom builtinPlacements 3`] = `
         style="position: absolute;"
       />
       <div
-        class="rc-tour-pannel"
+        class="rc-tour-panel"
       >
         <div
           class="rc-tour-section"