diff --git a/guides/uis/_menu.md b/guides/uis/_menu.md
index 4b45aaf11..ed824b1b5 100644
--- a/guides/uis/_menu.md
+++ b/guides/uis/_menu.md
@@ -2,4 +2,5 @@
# [Localization / I18n](i18n)
# [Localized Data](localized-data)
# [SAP Fiori UIs](fiori)
+# [Vue.js or React UIs](vue-react)
# [Analytics](analytics)
diff --git a/guides/uis/index.md b/guides/uis/index.md
index 84edf418f..35a8ea931 100644
--- a/guides/uis/index.md
+++ b/guides/uis/index.md
@@ -18,5 +18,8 @@ On top of that, there is out-of-the-box support for SAP Fiori elements, for exam
[ SAP Fiori UIs ](fiori)
: This guide explains how to serve SAP Fiori UIs from CAP applications, including the usage of Fiori annotations and Fiori drafts.
+[ Vue.js + React.js ](vue-react)
+ : This guide explains how to serve Vue.js or React UIs with a CAP backend.
+
[ Analytics ](./analytics)
: This guide explains how to serve analytical UIs from CAP applications using SAP Fiori elements for analytical applications.
\ No newline at end of file
diff --git a/guides/uis/vue-react.md b/guides/uis/vue-react.md
new file mode 100644
index 000000000..c2e312376
--- /dev/null
+++ b/guides/uis/vue-react.md
@@ -0,0 +1,146 @@
+---
+
+---
+
+# Serving Vue.js or React
+
+CAP is easily integrated with Vue.js, React, Svelte, or any other popular UI library. This guide explains how to set up a minimal project with a UI.
+
+
+
+## Example project
+
+The example here is built on a minimal CAP project:
+
+```sh
+cds init bookshop --nodejs --add tiny-sample && code bookshop
+```
+
+You can already start the CAP backend to watch for changes:
+```sh
+cds watch
+```
+
+**In a new terminal**, create a new Vue.js or React app in _app/catalog_:
+
+::: code-group
+```sh [Vue.js]
+cd app
+npm create vite@latest catalog -- --template vue
+```
+```sh [React]
+cd app
+npm create vite@latest catalog -- --template react
+```
+:::
+> Confirm "Install with npm and start now?" if asked.
+
+Now add a proxy to `app/catalog/vite.config.js`:
+
+::: code-group
+```js [Vue.js] {6-10}
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+ plugins: [vue()],
+ server: {
+ proxy: {
+ '/odata': 'http://localhost:4004'
+ }
+ }
+})
+
+```
+```js [React] {6-10}
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ proxy: {
+ '/odata': 'http://localhost:4004'
+ }
+ }
+})
+```
+
+:::
+
+Replace _src/App.vue_ (Vue.js) or _src/App.jsx_ (React) with a minimal example:
+
+::: code-group
+```vue [App.vue]
+
+
+
+ Books
+
+
+ |
+ {{ b.title }}
+ by {{ b.author }}
+ |
+
+
+
+```
+```jsx [App.jsx]
+import { useEffect, useState } from 'react'
+
+export default function App() {
+ const [books, setBooks] = useState([])
+
+ useEffect(() => {
+ fetch('/odata/v4/catalog/Books')
+ .then(r => r.json())
+ .then(r => setBooks(r.value))
+ }, [])
+
+ return (
+ <>
+
Books
+
+
+ {books.map(b => (
+
+ |
+ {b.title}
+ by {b.author}
+ |
+
+ ))}
+
+
+ >
+ )
+}
+```
+:::
+
+Now simply open the running dev server on http://localhost:5173 to see the UI.
+
+::: details Dev server not accessible?
+
+The server might not be started yet, run this command:
+```sh
+npm run dev
+```
+:::
+
+### Next Up
+
+You can deploy this project to Cloud Foundry or Kyma using the SAP BTP Application Frontend service (Cloud Foundry only) or a custom App Router setup.
+
+[Learn more about Cloud Foundry deployment](../deploy/to-cf#add-ui){.learn-more}
+[Learn more about Kyma deployment](../deploy/to-kyma.md){.learn-more}