diff --git a/docs/docs/widgets/steps.md b/docs/docs/widgets/steps.md
new file mode 100644
index 0000000000..a52dfeb1c0
--- /dev/null
+++ b/docs/docs/widgets/steps.md
@@ -0,0 +1,70 @@
+---
+id: steps
+title: Steps
+---
+# Steps
+
+Steps are used to guide users through complex processes, making them easier and more intuitive.
+
+
+
+
+
+
+
+
+### Steps
+
+This property lets you add and the steps.
+
+
+```{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1},{ name: 'step 2', tooltip: 'some tooltip', id: 2},{ name: 'step 3', tooltip: 'some tooltip', id: 3},{ name: 'step 4', tooltip: 'some tooltip', id: 4},{ name: 'step 5', tooltip: 'some tooltip', id: 5}]}}```
+
+add another object to add one more step.
+
+### Current step
+
+This property lets you select the current step you want to be highlighted.
+
+### Steps selectable
+
+This property when disabled will disable selection of steps.
+
+
+## Events
+
+### On select
+This event is fired whenever the user selects any step.
+
+## Layout
+
+### Show on desktop
+
+Toggle on or off to display the widget in desktop view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+### Show on mobile
+
+Toggle on or off to display the widget in mobile view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
+## Styles
+
+### Theme
+
+You can change the theme of widget by selecting available themes from dropdown.
+
+
+### Colour
+
+You can change the color of the widget by entering the Hex color code or choosing a color of your choice from the color picker.
+
+
+### Text Colour
+
+You can change the text color of the widget by entering the Hex color code or choosing a color of your choice from the color picker.
+
+### Visibility
+
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::
\ No newline at end of file
diff --git a/docs/sidebars.js b/docs/sidebars.js
index ed2772062d..da8b0bb3e5 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -129,6 +129,7 @@ const sidebars = {
'widgets/spinner',
'widgets/star',
'widgets/statistics',
+ 'widgets/steps',
'widgets/table',
'widgets/tabs',
'widgets/tags',
diff --git a/docs/static/img/widgets/steps/steps.png b/docs/static/img/widgets/steps/steps.png
new file mode 100644
index 0000000000..49c59e9a19
Binary files /dev/null and b/docs/static/img/widgets/steps/steps.png differ
diff --git a/frontend/assets/images/icons/widgets/steps.svg b/frontend/assets/images/icons/widgets/steps.svg
new file mode 100644
index 0000000000..2fc26b8c98
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/steps.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx
index 7f863cae45..957398c9a3 100644
--- a/frontend/src/Editor/Box.jsx
+++ b/frontend/src/Editor/Box.jsx
@@ -42,6 +42,7 @@ import { ButtonGroup } from './Components/ButtonGroup';
import { CustomComponent } from './Components/CustomComponent/CustomComponent';
import { VerticalDivider } from './Components/verticalDivider';
import { PDF } from './Components/PDF';
+import { Steps } from './Components/Steps';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import '@/_styles/custom.scss';
import { resolveProperties, resolveStyles, resolveGeneralProperties } from './component-properties-resolution';
@@ -90,6 +91,7 @@ const AllComponents = {
CustomComponent,
VerticalDivider,
PDF,
+ Steps,
};
export const Box = function Box({
diff --git a/frontend/src/Editor/Components/Steps.jsx b/frontend/src/Editor/Components/Steps.jsx
new file mode 100644
index 0000000000..7c89d88e48
--- /dev/null
+++ b/frontend/src/Editor/Components/Steps.jsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+
+export const Steps = function Button({ properties, styles, fireEvent, setExposedVariable, height }) {
+ const { currentStep, stepsSelectable, steps } = properties;
+ const { color, theme, visibility } = styles;
+
+ const [activeStep, setActiveStep] = useState(null);
+
+ const dynamicStyle = {
+ '--bgColor': styles.color,
+ '--textColor': styles.textColor,
+ };
+ const activeStepHandler = (id) => {
+ const active = steps.filter((item) => item.id == id);
+ setExposedVariable('currentStepId', active[0].id).then(() => fireEvent('onSelect'));
+ setActiveStep(active[0].id);
+ };
+
+ useEffect(() => {
+ setActiveStep(currentStep);
+ setExposedVariable('currentStepId', currentStep).then(() => fireEvent('onSelect'));
+ }, [currentStep]);
+
+ return (
+ visibility && (
+