From 5278ff984ca7b54fcf631cdf3ac8358117a2b8d0 Mon Sep 17 00:00:00 2001
From: feranmiodugbemi <87916077+feranmiodugbemi@users.noreply.github.com>
Date: Sat, 22 Mar 2025 05:56:19 +0100
Subject: [PATCH] Update documentation for adding Ionic to an existing reactjs
 project

---
 docs/intro/cdn.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/docs/intro/cdn.md b/docs/intro/cdn.md
index a90c4a6b250..c44af2a3965 100644
--- a/docs/intro/cdn.md
+++ b/docs/intro/cdn.md
@@ -63,6 +63,9 @@ $ npm install @ionic/react-router
 To include the necessary CSS in a React project, add the following to the root App component.
 
 ```javascript
+/* Import setup Ionic react and IonApp for vite to recognize Ionic */
+import { IonApp, setupIonicReact } from "@ionic/react";
+
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
 
@@ -78,6 +81,20 @@ import '@ionic/react/css/text-alignment.css';
 import '@ionic/react/css/text-transformation.css';
 import '@ionic/react/css/flex-utils.css';
 import '@ionic/react/css/display.css';
+
+/* Set up function */
+setupIonicReact();
+
+/* React App component */
+export default const App = () = {
+
+  return(
+    <IonApp>
+    /* Components or routes go in here */
+    </IonApp>
+  )
+
+}
 ```
 
 ## Ionic + Vue