diff --git a/samples/inputs/ripple/button/src/index.tsx b/samples/inputs/ripple/button/src/index.tsx
index 90cca55cd2..d1b9c5d53f 100644
--- a/samples/inputs/ripple/button/src/index.tsx
+++ b/samples/inputs/ripple/button/src/index.tsx
@@ -1,30 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrRipple, IgrRippleModule, IgrButton, IgrButtonModule } from 'igniteui-react';
+import { IgrRipple, IgrButton } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrRippleModule.register();
-IgrButtonModule.register();
+export default function RippleButton() {
 
-export default class RippleButton extends React.Component<any, any> {
-
-    constructor(props: any) {
-        super(props);           
-    }
-
-    public render(): JSX.Element {
-        return (
-            <div className="container-center sample">
-                <IgrButton>
-                    <IgrRipple></IgrRipple>
-                    <span>Ripple Button</span>
-                </IgrButton>
-            </div>
-        );
-    }
+    return (
+        <div className="container-center sample">
+            <IgrButton>
+                <IgrRipple></IgrRipple>
+                <span>Ripple Button</span>
+            </IgrButton>
+        </div>
+    );
 }
 
-// rendering above class to the React DOM
+// rendering above component to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(<RippleButton/>);
diff --git a/samples/inputs/ripple/color/src/index.tsx b/samples/inputs/ripple/color/src/index.tsx
index dc93ebc170..6530c914bd 100644
--- a/samples/inputs/ripple/color/src/index.tsx
+++ b/samples/inputs/ripple/color/src/index.tsx
@@ -1,30 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrRipple, IgrRippleModule, IgrButton, IgrButtonModule } from 'igniteui-react';
+import { IgrRipple, IgrButton } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrRippleModule.register();
-IgrButtonModule.register();
+export default function RippleColor() {
 
-export default class RippleColor extends React.Component<any, any> {
-
-    constructor(props: any) {
-        super(props);           
-    }
-
-    public render(): JSX.Element {
-        return (
-            <div className="container-center sample">
-                <IgrButton>
-                    <IgrRipple></IgrRipple>
-                    <span>Ripple Button</span>
-                </IgrButton>
-            </div>
-        );
-    }
+    return (
+        <div className="container-center sample">
+            <IgrButton>
+                <IgrRipple></IgrRipple>
+                <span>Ripple Button</span>
+            </IgrButton>
+        </div>
+    );
 }
 
-// rendering above class to the React DOM
+// rendering above component to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(<RippleColor/>);