diff --git a/samples/layouts/stepper/step-height/.devcontainer/devcontainer.json b/samples/layouts/stepper/step-height/.devcontainer/devcontainer.json
new file mode 100644
index 0000000000..e0b8e9c925
--- /dev/null
+++ b/samples/layouts/stepper/step-height/.devcontainer/devcontainer.json
@@ -0,0 +1,4 @@
+{
+    "name": "Node.js",
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:22"
+}
\ No newline at end of file
diff --git a/samples/layouts/stepper/step-height/.eslintrc.js b/samples/layouts/stepper/step-height/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/layouts/stepper/step-height/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/layouts/stepper/step-height/README.md b/samples/layouts/stepper/step-height/README.md
new file mode 100644
index 0000000000..e802da8301
--- /dev/null
+++ b/samples/layouts/stepper/step-height/README.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Step Height feature using [Stepper](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/layouts/stepper/step-height" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/layouts/stepper/step-height?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/stepper/step-height
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/stepper/step-height/index.html b/samples/layouts/stepper/step-height/index.html
new file mode 100644
index 0000000000..a345b13df5
--- /dev/null
+++ b/samples/layouts/stepper/step-height/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>StepperStepHeight</title>
+    <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/layouts/stepper/step-height/package.json b/samples/layouts/stepper/step-height/package.json
new file mode 100644
index 0000000000..8a2144281d
--- /dev/null
+++ b/samples/layouts/stepper/step-height/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "react-step-height",
+  "description": "This project provides example of Dynamic Step Height feature using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "^1.17.0",
+    "igniteui-react": "^19.6.2",
+    "igniteui-react-core": "19.6.0-beta.0",
+    "igniteui-webcomponents": "^7.1.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
+    "typescript": "^4.8.4",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4",
+    "vitest-canvas-mock": "^0.3.3",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/layouts/stepper/step-height/sandbox.config.json b/samples/layouts/stepper/step-height/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/stepper/step-height/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
\ No newline at end of file
diff --git a/samples/layouts/stepper/step-height/src/index.css b/samples/layouts/stepper/step-height/src/index.css
new file mode 100644
index 0000000000..d228c1b900
--- /dev/null
+++ b/samples/layouts/stepper/step-height/src/index.css
@@ -0,0 +1,76 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+igc-switch {
+  margin-left: 0.5rem;
+}
+
+igc-stepper {
+  background: var(--ig-gray-100);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--ig-gray-400);
+  margin-block-start: 0.75rem;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+
+  .switch-wrapper {
+    border: 1px solid var(--ig-gray-400);
+    border-radius: 0.375rem;
+    background: var(--ig-gray-100);
+    padding: 0.5rem;
+    font-size: 1.375rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 195px;
+    justify-content: center;
+  }
+
+  igc-switch::part(label) {
+    font-size: 1.375rem;
+  }
+}
+
+igc-switch {
+  --border-radius-track: 0px;
+  --thumb-size: 1rem;
+  --border-radius-thumb: 2px;
+  --size: 2.5rem;
+  --thumb-off-color: var(--ig-primary-500);
+  --thumb-on-color: var(--ig-primary-500);
+  --track-on-color: white;
+  --track-on-hover-color: white;
+  --thumb-off-hover-color: var(--ig-primary-500);
+  --border-on-color: var(--ig-gray-400);
+  --border-on-hover-color: var(--ig-gray-500);
+
+  &::part(control) {
+    height: 1.5rem;
+    border-radius: 0.25rem;
+  }
+}
+
+igc-step::part(content) {
+  @media (width < 756px) {
+    overflow: scroll;
+  }
+}
+
+h5 {
+  margin-block: 0.375rem;
+}
+
+li {
+  font-size: 1rem;
+  padding-block: 0.5rem;
+}
+
+.container {
+  padding: 1rem;
+}
\ No newline at end of file
diff --git a/samples/layouts/stepper/step-height/src/index.tsx b/samples/layouts/stepper/step-height/src/index.tsx
new file mode 100644
index 0000000000..ca8f35ba9e
--- /dev/null
+++ b/samples/layouts/stepper/step-height/src/index.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { IgrStepper, IgrStep, IgrSwitch } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './index.css';
+
+export default function StepHeight() {
+  const stepperRef = React.useRef<IgrStepper>(null);
+  const [rows, setRows] = React.useState('1fr');
+
+  const onSwitchChange = (e: any) => {
+    const newRows = e.detail.checked ? '0fr' : '1fr';
+    stepperRef.current.style.setProperty('--body-grid-rows', newRows);
+    setRows(newRows);
+  };
+
+  return (
+    <div className="container sample">
+      <div className="header">
+        <div className="switch-wrapper">
+          <div>
+            <span>1fr</span>
+            <IgrSwitch onChange={onSwitchChange}>
+              <span>0fr</span>
+            </IgrSwitch>
+          </div>
+          <h5>
+            --body-grid-rows: <span>{rows}</span>
+          </h5>
+        </div>
+      </div>
+      <IgrStepper ref={stepperRef} contentTop={true}>
+        <IgrStep>
+          <span slot="title">Personal Info</span>
+          <h2>Personal Info</h2>
+          <ul>
+            <li>Please enter your personal information.</li>
+          </ul>
+        </IgrStep>
+        <IgrStep>
+          <span slot="title">Delivery address</span>
+          <h2>Delivery address</h2>
+          <ul>
+            <li>Enter your shipping address for delivery.</li>
+            <li>
+              If you need to change your address, please contact our support
+              team.
+            </li>
+            <li>
+              If you will not be at the address during the delivery time, please
+              provide an alternative address.
+            </li>
+          </ul>
+        </IgrStep>
+        <IgrStep>
+          <span slot="title">Billing address</span>
+          <h2>Billing address</h2>
+          <ul>
+            <li>Please enter your billing address.</li>
+          </ul>
+        </IgrStep>
+        <IgrStep invalid={true}>
+          <span slot="title">Confirmation</span>
+          <h2>Confirmation</h2>
+          <ul>
+            <li>Please review your order details and confirm your purchase.</li>
+          </ul>
+        </IgrStep>
+      </IgrStepper>
+    </div>
+  );
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<StepHeight />);
diff --git a/samples/layouts/stepper/step-height/tsconfig.json b/samples/layouts/stepper/step-height/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/layouts/stepper/step-height/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/layouts/stepper/step-height/vite.config.js b/samples/layouts/stepper/step-height/vite.config.js
new file mode 100644
index 0000000000..1744dbc719
--- /dev/null
+++ b/samples/layouts/stepper/step-height/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'build'
+  },
+  server: {
+    open: false
+  },
+});
\ No newline at end of file