diff --git a/src/components/steps/StepItem.tsx b/src/components/steps/StepItem.tsx
new file mode 100644
index 00000000..85ec4f3e
--- /dev/null
+++ b/src/components/steps/StepItem.tsx
@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface StepItemProps {
+  children?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+  color?: Color;
+}
+
+const StepItem = ({ children, icon, className, color }: StepItemProps) => {
+  const stepItemBaseClassName = cn('step', {
+    'step-primary': color === 'primary',
+    'step-secondary': color === 'secondary',
+    'step-accent': color === 'accent',
+    'step-neutral': color === 'neutral',
+    'step-info': color === 'info',
+    'step-success': color === 'success',
+    'step-warning': color === 'warning',
+    'step-error': color === 'error',
+  });
+
+  return (
+    <li className={cn(stepItemBaseClassName, className)}>
+      <span className='step-icon'>{icon}</span>
+
+      <div>{children}</div>
+    </li>
+  );
+};
+
+export default StepItem;