diff --git a/README.md b/README.md
index c1346d6b..09074852 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,17 @@
-# React Flow in Vue3 = Revue Flow
-[![contentful](./assets/Revueflow.png)](https://reactflow.dev/)
-![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/revue-flow)
-[![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-flow.svg)](https://david-dm.org/bcakmakoglu/revue-flow)
-[![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-flow.svg?type=dev)](https://david-dm.org/bcakmakoglu/revue-flow?type=dev)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/revue-flow)
-![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/revue-flow)
-![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/revue-flow)
+# Vue Flow
+[![vue flow](./assets/vue-flow.gif)](https://reactflow.dev/)
+![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow)
+[![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow.svg)](https://david-dm.org/bcakmakoglu/vue-flow)
+[![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow.svg?type=dev)](https://david-dm.org/bcakmakoglu/vue-flow?type=dev)
+![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/vue-flow)
+![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/vue-flow)
+![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/vue-flow)
 
 This repo is still a big construction site with nothing really finished.
 You can check the examples to see what's working and what's not.
 Please visit [React Flow](https://reactflow.dev/) and support them if you like the idea. 
 They did most of the heavy lifting by writing the library in the first place.
-All I did is bring it to Vue3.
+All I did is bring it to Vue.
 
 ### Motivation
 Seeing as many libraries exist in the React ecosystem and Vue sadly does not get the same
@@ -20,31 +20,29 @@ love and attention, I decided to port the React Flow library to Vue.js.
 ## Usage
 Check the React Flow docs for usage. It's really the same.
 
-### Vue3
+### Vue 3
 ```bash
-# install revue flow
-$ yarn add @braks/revue-flow
+# install vue flow
+$ pnpm add @braks/vue-flow
 
 # or
-$ npm i --save @braks/revue-flow
+$ npm i --save @braks/vue-flow
 ```
 
-### Vue2
-This doesn't work with Vue2, sorry.
-
-## Development
-This project uses Vite for development and Rollup to create a distribution.
+### Vue 2
+Vue Flow doesn't work with Vue 2, sorry.
 
+## 🧪 Development
 ```bash
 # start (dev)
-$ yarn dev
+$ pnpm dev
 
 # build app
-$ yarn build
+$ pnpm build
 
 # serve app from build
-$ yarn serve
+$ pnpm serve
 
 # build dist
-$ yarn build:dist
+$ pnpm build:dist
 ```
diff --git a/assets/Revueflow.png b/assets/Revueflow.png
deleted file mode 100644
index c76e0527..00000000
Binary files a/assets/Revueflow.png and /dev/null differ
diff --git a/assets/vue-flow.gif b/assets/vue-flow.gif
new file mode 100644
index 00000000..7a624780
Binary files /dev/null and b/assets/vue-flow.gif differ
diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
index 557a0399..de50e3b8 100644
--- a/examples/Basic/Basic.vue
+++ b/examples/Basic/Basic.vue
@@ -54,7 +54,7 @@ const toggleClassnames = () => {
 </script>
 <template>
   <Flow
-    class="revue-flow-basic-example"
+    class="vue-flow-basic-example"
     :elements="elements"
     :default-zoom="1.5"
     :min-zoom="0.2"
diff --git a/examples/CustomNode/ColorSelectorNode.vue b/examples/CustomNode/ColorSelectorNode.vue
index 52caadec..a43e567c 100644
--- a/examples/CustomNode/ColorSelectorNode.vue
+++ b/examples/CustomNode/ColorSelectorNode.vue
@@ -25,7 +25,7 @@ const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px'
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
 </script>
 <template>
-  <div class="revue-flow__node-color-selector">
+  <div class="vue-flow__node-color-selector">
     <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
     <div>
       Custom Color Picker Node: <strong>{{ data.color }}</strong>
diff --git a/examples/DragNDrop/Sidebar.vue b/examples/DragNDrop/Sidebar.vue
index 6e8be2be..e00eb6d9 100644
--- a/examples/DragNDrop/Sidebar.vue
+++ b/examples/DragNDrop/Sidebar.vue
@@ -9,13 +9,13 @@ const onDragStart = (event: DragEvent, nodeType: string) => {
 <template>
   <aside>
     <div class="description">You can drag these nodes to the pane on the left.</div>
-    <div class="revue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
+    <div class="vue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
       Input Node
     </div>
-    <div class="revue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
+    <div class="vue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
       Default Node
     </div>
-    <div class="revue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
+    <div class="vue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
       Output Node
     </div>
   </aside>
diff --git a/examples/EdgeWithButton/ButtonEdge.vue b/examples/EdgeWithButton/ButtonEdge.vue
index 0ac85e56..d862b7b1 100644
--- a/examples/EdgeWithButton/ButtonEdge.vue
+++ b/examples/EdgeWithButton/ButtonEdge.vue
@@ -59,7 +59,7 @@ const center = computed(() =>
 )
 </script>
 <template>
-  <path :id="props.id" :style="props.style" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <foreignObject
     :width="foreignObjectSize"
     :height="foreignObjectSize"
diff --git a/examples/Edges/CustomEdge.vue b/examples/Edges/CustomEdge.vue
index ed08362f..4d07eb65 100644
--- a/examples/Edges/CustomEdge.vue
+++ b/examples/Edges/CustomEdge.vue
@@ -32,7 +32,7 @@ const edgePath = computed(() =>
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
 <template>
-  <path :id="props.id" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <text>
     <textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle">
       {{ props.data.text }}
diff --git a/examples/Edges/CustomEdge2.vue b/examples/Edges/CustomEdge2.vue
index 64e6ac90..d259b24d 100644
--- a/examples/Edges/CustomEdge2.vue
+++ b/examples/Edges/CustomEdge2.vue
@@ -42,7 +42,7 @@ const center = computed(() =>
 )
 </script>
 <template>
-  <path :id="props.id" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <EdgeText
     :x="center[0]"
     :y="center[1]"
diff --git a/examples/Header.vue b/examples/Header.vue
index 36ddf1e4..559fb4d4 100644
--- a/examples/Header.vue
+++ b/examples/Header.vue
@@ -10,7 +10,7 @@ const onChange = (event: any) => {
 </script>
 <template>
   <header>
-    <a class="logo" href="https://github.com/bcakmakoglu/revue-flow"> Revue Flow Dev </a>
+    <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow Dev </a>
     <select v-model="route.path" @change="onChange">
       <template v-for="r of routes" :key="r.path">
         <option v-if="r.path !== '/'" :value="r.path">
diff --git a/examples/Hidden/HiddenExample.vue b/examples/Hidden/HiddenExample.vue
index 0ff2e6e7..b1f7e7fd 100644
--- a/examples/Hidden/HiddenExample.vue
+++ b/examples/Hidden/HiddenExample.vue
@@ -31,7 +31,7 @@ watchEffect(() => {
       <div>
         <label for="ishidden">
           isHidden
-          <input id="ishidden" v-model="isHidden" type="checkbox" class="revue-flow__ishidden" />
+          <input id="ishidden" v-model="isHidden" type="checkbox" class="vue-flow__ishidden" />
         </label>
       </div>
     </div>
diff --git a/examples/Interaction/InteractionExample.vue b/examples/Interaction/InteractionExample.vue
index 9739460b..cac7e44f 100644
--- a/examples/Interaction/InteractionExample.vue
+++ b/examples/Interaction/InteractionExample.vue
@@ -73,43 +73,43 @@ const captureElementClick = ref(false)
       <div>
         <label for="draggable">
           nodesDraggable
-          <input id="draggable" v-model="isDraggable" type="checkbox" class="revue-flow__draggable" />
+          <input id="draggable" v-model="isDraggable" type="checkbox" class="vue-flow__draggable" />
         </label>
       </div>
       <div>
         <label for="connectable">
           nodesConnectable
-          <input id="connectable" v-model="isConnectable" type="checkbox" class="revue-flow__connectable" />
+          <input id="connectable" v-model="isConnectable" type="checkbox" class="vue-flow__connectable" />
         </label>
       </div>
       <div>
         <label for="selectable">
           elementsSelectable
-          <input id="selectable" v-model="isSelectable" type="checkbox" class="revue-flow__selectable" />
+          <input id="selectable" v-model="isSelectable" type="checkbox" class="vue-flow__selectable" />
         </label>
       </div>
       <div>
         <label for="zoomonscroll">
           zoomOnScroll
-          <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="revue-flow__zoomonscroll" />
+          <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="vue-flow__zoomonscroll" />
         </label>
       </div>
       <div>
         <label for="zoomonpinch">
           zoomOnPinch
-          <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="revue-flow__zoomonpinch" />
+          <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="vue-flow__zoomonpinch" />
         </label>
       </div>
       <div>
         <label for="panonscroll">
           panOnScroll
-          <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="revue-flow__panonscroll" />
+          <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="vue-flow__panonscroll" />
         </label>
       </div>
       <div>
         <label>
           panOnScrollMode
-          <select id="panonscrollmode" v-model="panOnScrollMode" class="revue-flow__panonscrollmode">
+          <select id="panonscrollmode" v-model="panOnScrollMode" class="vue-flow__panonscrollmode">
             <option value="free">free</option>
             <option value="horizontal">horizontal</option>
             <option value="vertical">vertical</option>
@@ -119,36 +119,31 @@ const captureElementClick = ref(false)
       <div>
         <label for="zoomondbl">
           zoomOnDoubleClick
-          <input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="revue-flow__zoomondbl" />
+          <input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="vue-flow__zoomondbl" />
         </label>
       </div>
       <div>
         <label for="panemoveable">
           paneMoveable
-          <input id="panemoveable" v-model="paneMoveable" type="checkbox" class="revue-flow__panemoveable" />
+          <input id="panemoveable" v-model="paneMoveable" type="checkbox" class="vue-flow__panemoveable" />
         </label>
       </div>
       <div>
         <label for="capturezoompaneclick">
           capture onPaneClick
-          <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="revue-flow__capturezoompaneclick" />
+          <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="vue-flow__capturezoompaneclick" />
         </label>
       </div>
       <div>
         <label for="capturezoompanescroll">
           capture onPaneScroll
-          <input
-            id="capturezoompanescroll"
-            v-model="captureZoomScroll"
-            type="checkbox"
-            class="revue-flow__capturezoompanescroll"
-          />
+          <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
         </label>
       </div>
       <div>
         <label for="captureelementclick">
           capture onElementClick
-          <input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="revue-flow__captureelementclick" />
+          <input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="vue-flow__captureelementclick" />
         </label>
       </div>
     </div>
diff --git a/examples/index.css b/examples/index.css
index eb8babe3..bf23756e 100644
--- a/examples/index.css
+++ b/examples/index.css
@@ -58,22 +58,22 @@ header select {
   display: none;
 }
 
-.revue-flow__node a {
+.vue-flow__node a {
   font-weight: 700;
   color: #111;
 }
 
-.revue-flow__node.dark-node {
+.vue-flow__node.dark-node {
   background: #0041d0;
   color: #f8f8f8;
 }
 
-.revue-flow__node.dark {
+.vue-flow__node.dark {
   background: #557;
   color: #f8f8f8;
 }
 
-.revue-flow__node-selectorNode {
+.vue-flow__node-selectorNode {
   font-size: 14px;
   background: #f0f2f3;
   border: 1px solid #555;
@@ -81,7 +81,7 @@ header select {
   text-align: center;
 }
 
-.revue-flow__node-selectorNode .revue-flow__handle {
+.vue-flow__node-selectorNode .vue-flow__handle {
   border-color: #f0f2f3;
 }
 
diff --git a/index.html b/index.html
index 1321d38e..cea0eeff 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Revue Flow Examples</title>
+    <title>Vue Flow Examples</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package.json b/package.json
index d2a7387d..f06dfdc8 100644
--- a/package.json
+++ b/package.json
@@ -1,25 +1,25 @@
 {
-  "name": "@braks/revue-flow",
+  "name": "@braks/vue-flow",
   "version": "0.1.2",
   "private": false,
   "repository": {
     "type": "git",
-    "url": "https://github.com/bcakmakoglu/revue-flow"
+    "url": "https://github.com/bcakmakoglu/vue-flow"
   },
   "license": "MIT",
   "author": "Burak Cakmakoglu",
   "exports": {
     ".": {
-      "import": "./dist/revue-flow.esm.js",
-      "require": "./dist/revue-flow.cjs.js"
+      "import": "./dist/vue-flow.esm.js",
+      "require": "./dist/vue-flow.cjs.js"
     },
     "./*": "./*"
   },
-  "main": "./dist/revue-flow.cjs.js",
-  "types": "./dist/revue-flow.d.ts",
-  "module": "./dist/revue-flow.esm.js",
-  "unpkg": "./dist/revue-flow.iife.min.js",
-  "jsdelivr": "./dist/revue-flow.iife.min.js",
+  "main": "./dist/vue-flow.cjs.js",
+  "types": "./dist/vue-flow.d.ts",
+  "module": "./dist/vue-flow.esm.js",
+  "unpkg": "./dist/vue-flow.iife.min.js",
+  "jsdelivr": "./dist/vue-flow.iife.min.js",
   "sideEffects": false,
   "files": [
     "dist"
diff --git a/rollup.ts b/rollup.ts
index 9c1c3b2f..50b966ff 100644
--- a/rollup.ts
+++ b/rollup.ts
@@ -14,20 +14,20 @@ const configs: any[] = []
 
 const activePackages = [
   {
-    display: 'Revue-Flow',
-    external: ['@vueuse/core']
-  }
+    display: 'vue-flow',
+    external: ['@vueuse/core'],
+  },
 ]
 
 // @ts-ignore
 for (const { external, iife } of activePackages) {
   const iifeGlobals = {
-    vue: 'Vue',
-    '@vueuse/core': 'VueUse'
+    'vue': 'Vue',
+    '@vueuse/core': 'VueUse',
   }
 
   const iifeName = 'RevueFlow'
-  const functionNames = ['revue-flow']
+  const functionNames = ['vue-flow']
 
   for (const fn of functionNames) {
     const input = 'src/index.ts'
@@ -35,12 +35,12 @@ for (const { external, iife } of activePackages) {
     const output: any[] = [
       {
         file: `dist/${fn}.cjs.js`,
-        format: 'cjs'
+        format: 'cjs',
       },
       {
         file: `dist/${fn}.esm.js`,
-        format: 'es'
-      }
+        format: 'es',
+      },
     ]
 
     if (iife !== false) {
@@ -50,7 +50,7 @@ for (const { external, iife } of activePackages) {
           format: 'iife',
           name: iifeName,
           extend: true,
-          globals: iifeGlobals
+          globals: iifeGlobals,
         },
         {
           file: `dist/${fn}.iife.min.js`,
@@ -61,11 +61,11 @@ for (const { external, iife } of activePackages) {
           plugins: [
             terser({
               format: {
-                comments: false
-              }
-            })
-          ]
-        }
+                comments: false,
+              },
+            }),
+          ],
+        },
       )
     }
 
@@ -76,34 +76,34 @@ for (const { external, iife } of activePackages) {
         typescript({
           tsconfigOverride: {
             compilerOptions: {
-              declaration: false
-            }
-          }
+              declaration: false,
+            },
+          },
         }),
         svg(),
         resolve(),
         postcss({
           inject: true,
-          minimize: true
+          minimize: true,
         }),
         commonjs({ include: 'node_modules/**' }),
         babel({
           extensions: [...DEFAULT_BABEL_EXTENSIONS, '.ts', '.tsx'],
           exclude: 'node_modules/**',
-          babelHelpers: 'bundled'
-        })
+          babelHelpers: 'bundled',
+        }),
       ],
-      external: ['vue', ...(external || [])]
+      external: ['vue', ...(external || [])],
     })
 
     configs.push({
       input,
       output: {
         file: `dist/${fn}.d.ts`,
-        format: 'es'
+        format: 'es',
       },
       plugins: [dts()],
-      external: ['vue', ...(external || []), /\.css$/]
+      external: ['vue', ...(external || []), /\.css$/],
     })
   }
 }
diff --git a/src/additional-components/Background/Background.vue b/src/additional-components/Background/Background.vue
index 60e80d42..f0364e08 100644
--- a/src/additional-components/Background/Background.vue
+++ b/src/additional-components/Background/Background.vue
@@ -24,7 +24,7 @@ const defaultColors: Record<BackgroundVariant, string> = {
 const store = useStore()
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 
-const bgClasses = ['revue-flow__background']
+const bgClasses = ['vue-flow__background']
 const background = computed(() => {
   const scaledGap = props.gap && props.gap * store.transform[2]
   const xOffset = scaledGap && store.transform[0] % scaledGap
diff --git a/src/additional-components/Controls/ControlButton.vue b/src/additional-components/Controls/ControlButton.vue
index 2615374d..e7ad5e5d 100644
--- a/src/additional-components/Controls/ControlButton.vue
+++ b/src/additional-components/Controls/ControlButton.vue
@@ -6,7 +6,7 @@ export interface ControlButtonProps extends ButtonHTMLAttributes {}
 const props: any = defineProps<ControlButtonProps>()
 </script>
 <template>
-  <button :class="['revue-flow__controls-button']" v-bind="props">
+  <button :class="['vue-flow__controls-button']" v-bind="props">
     <slot></slot>
   </button>
 </template>
diff --git a/src/additional-components/Controls/Controls.vue b/src/additional-components/Controls/Controls.vue
index f44776c5..0e953033 100644
--- a/src/additional-components/Controls/Controls.vue
+++ b/src/additional-components/Controls/Controls.vue
@@ -30,7 +30,7 @@ const store = useStore()
 const { zoomIn, zoomOut, fitView } = useZoomPanHelper()
 
 const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable
-const mapClasses = ['revue-flow__controls']
+const mapClasses = ['vue-flow__controls']
 
 const onZoomInHandler = () => {
   zoomIn?.()
@@ -56,14 +56,14 @@ const onInteractiveChangeHandler = () => {
   <div :class="mapClasses">
     <template v-if="props.showZoom">
       <slot name="control-zoom-in">
-        <ControlButton class="revue-flow__controls-zoomin" @click="onZoomInHandler">
+        <ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
           <slot name="icon-zoom-in">
             <PlusIcon />
           </slot>
         </ControlButton>
       </slot>
       <slot name="control-zoom-out">
-        <ControlButton class="revue-flow__controls-zoomout" @click="onZoomOutHandler">
+        <ControlButton class="vue-flow__controls-zoomout" @click="onZoomOutHandler">
           <slot name="icon-zoom-out">
             <MinusIcon />
           </slot>
@@ -71,14 +71,14 @@ const onInteractiveChangeHandler = () => {
       </slot>
     </template>
     <slot name="control-fitview">
-      <ControlButton v-if="props.showFitView" class="revue-flow__controls-fitview" @click="onFitViewHandler">
+      <ControlButton v-if="props.showFitView" class="vue-flow__controls-fitview" @click="onFitViewHandler">
         <slot name="icon-fitview">
           <Fitview />
         </slot>
       </ControlButton>
     </slot>
     <slot name="control-interactive">
-      <ControlButton v-if="props.showInteractive" class="revue-flow__controls-interactive" @click="onInteractiveChangeHandler">
+      <ControlButton v-if="props.showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
         <slot name="icon-unlock">
           <Unlock v-if="isInteractive" />
         </slot>
diff --git a/src/additional-components/MiniMap/MiniMap.vue b/src/additional-components/MiniMap/MiniMap.vue
index 78ab76e6..7261ba61 100644
--- a/src/additional-components/MiniMap/MiniMap.vue
+++ b/src/additional-components/MiniMap/MiniMap.vue
@@ -73,7 +73,7 @@ const viewBox = computed(() => {
     :width="elementWidth"
     :height="elementHeight"
     :viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
-    class="revue-flow__minimap"
+    class="vue-flow__minimap"
   >
     <slot name="mini-map-nodes" :nodes="store.nodes" :view-box="viewBox">
       <template v-for="(node, i) of store.nodes" :key="`mini-map-node-${i}`">
@@ -94,7 +94,7 @@ const viewBox = computed(() => {
       </template>
     </slot>
     <path
-      class="revue-flow__minimap-mask"
+      class="vue-flow__minimap-mask"
       :d="`
       M${viewBox.x - viewBox.offset},${viewBox.y - viewBox.offset}h${viewBox.width + viewBox.offset * 2}
       v${viewBox.height + viewBox.offset * 2}
diff --git a/src/additional-components/MiniMap/MiniMapNode.vue b/src/additional-components/MiniMap/MiniMapNode.vue
index 716d844f..6a120d2f 100644
--- a/src/additional-components/MiniMap/MiniMapNode.vue
+++ b/src/additional-components/MiniMap/MiniMapNode.vue
@@ -22,7 +22,7 @@ const fill = computed(() => (props.color || styles.background || styles.backgrou
 </script>
 <template>
   <rect
-    class="revue-flow__minimap-node"
+    class="vue-flow__minimap-node"
     :x="props.x"
     :y="props.y"
     :rx="props.borderRadius"
diff --git a/src/additional-components/index.ts b/src/additional-components/index.ts
index b24608ed..c8374b35 100644
--- a/src/additional-components/index.ts
+++ b/src/additional-components/index.ts
@@ -1,5 +1,5 @@
-// These components are not used by revue Flow directly
-// but the user can add them as children of a revue Flow component
+// These components are not used by vue flow directly
+// but the user can add them as children of a vue flow component
 
 export { default as MiniMap } from './MiniMap/MiniMap.vue'
 export { default as Controls } from './Controls/Controls.vue'
diff --git a/src/components/ConnectionLine/ConnectionLine.vue b/src/components/ConnectionLine/ConnectionLine.vue
index b9083f0e..f7ffc5da 100644
--- a/src/components/ConnectionLine/ConnectionLine.vue
+++ b/src/components/ConnectionLine/ConnectionLine.vue
@@ -71,7 +71,7 @@ const dAttr = computed(() => {
 })
 </script>
 <template>
-  <g class="revue-flow__connection">
+  <g class="vue-flow__connection">
     <slot
       v-bind="{
         sourceX,
@@ -84,7 +84,7 @@ const dAttr = computed(() => {
         connectionLineStyle: props.connectionLineStyle,
       }"
     >
-      <path :d="dAttr" class="revue-flow__connection-path" :style="props.connectionLineStyle" />
+      <path :d="dAttr" class="vue-flow__connection-path" :style="props.connectionLineStyle" />
     </slot>
   </g>
 </template>
diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index 38c16528..80f7d7b0 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -52,7 +52,7 @@ const path = computed(() =>
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
 <template>
-  <path class="revue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
+  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
   <EdgeText
     v-if="props.label"
     :x="centered[0]"
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index 838132ad..048eb0ed 100644
--- a/src/components/Edges/Edge.vue
+++ b/src/components/Edges/Edge.vue
@@ -122,8 +122,8 @@ const edgePos = computed(() =>
   <g
     v-if="!props.edge.isHidden && isVisible(edgePos)"
     :class="[
-      'revue-flow__edge',
-      `revue-flow__edge-${props.edge.type || 'default'}`,
+      'vue-flow__edge',
+      `vue-flow__edge-${props.edge.type || 'default'}`,
       {
         selected: isSelected,
         animated: props.edge.animated,
diff --git a/src/components/Edges/EdgeAnchor.vue b/src/components/Edges/EdgeAnchor.vue
index 116249f7..15ce6878 100644
--- a/src/components/Edges/EdgeAnchor.vue
+++ b/src/components/Edges/EdgeAnchor.vue
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<EdgeAnchorProps>(), {
 </script>
 <template>
   <circle
-    class="revue-flow__edgeupdater"
+    class="vue-flow__edgeupdater"
     :cx="shiftX(props.centerX, props.radius, props.position)"
     :cy="shiftY(props.centerY, props.radius, props.position)"
     :r="props.radius"
diff --git a/src/components/Edges/EdgeText.vue b/src/components/Edges/EdgeText.vue
index 4669bd90..7a9ed4ae 100644
--- a/src/components/Edges/EdgeText.vue
+++ b/src/components/Edges/EdgeText.vue
@@ -30,19 +30,19 @@ const edgeRef = templateRef<SVGTextElement>('edge-text', null)
 const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
 </script>
 <template>
-  <g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="revue-flow__edge-textwrapper">
+  <g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="vue-flow__edge-textwrapper">
     <rect
       v-if="props.labelShowBg"
       :width="width + 2 * props.labelBgPadding[0] + 'px'"
       :height="height + 2 * props.labelBgPadding[1] + 'px'"
       :x="-props.labelBgPadding[0]"
       :y="-props.labelBgPadding[1]"
-      class="revue-flow__edge-textbg"
+      class="vue-flow__edge-textbg"
       :style="props.labelBgStyle"
       :rx="props.labelBgBorderRadius"
       :ry="props.labelBgBorderRadius"
     />
-    <text ref="edge-text" class="revue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
+    <text ref="edge-text" class="vue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
       <component
         :is="props.label.component"
         v-if="typeof props.label.component !== 'undefined'"
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index c8b16942..a4f281b4 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/src/components/Edges/SmoothStepEdge.vue
@@ -55,7 +55,7 @@ const path = computed(() =>
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
 <template>
-  <path class="revue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
+  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
   <EdgeText
     v-if="props.label"
     :x="centered[0]"
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index 6d36e075..64fd0e6b 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/src/components/Edges/StraightEdge.vue
@@ -59,7 +59,7 @@ const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerE
 <template>
   <path
     :style="props.style"
-    class="revue-flow__edge-path"
+    class="vue-flow__edge-path"
     :d="`M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`"
     :marker-end="markerEnd"
   />
diff --git a/src/components/Edges/utils.ts b/src/components/Edges/utils.ts
index 4cf31e69..bc31448f 100644
--- a/src/components/Edges/utils.ts
+++ b/src/components/Edges/utils.ts
@@ -5,7 +5,7 @@ export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string
     return `url(#${markerEndId})`
   }
 
-  return typeof arrowHeadType !== 'undefined' ? `url(#revue-flow__${arrowHeadType})` : 'none'
+  return typeof arrowHeadType !== 'undefined' ? `url(#vue-flow__${arrowHeadType})` : 'none'
 }
 
 export interface GetCenterParams {
diff --git a/src/components/Handle/Handle.vue b/src/components/Handle/Handle.vue
index 32f5d5fd..34097967 100644
--- a/src/components/Handle/Handle.vue
+++ b/src/components/Handle/Handle.vue
@@ -32,8 +32,8 @@ const onMouseDownHandler = (event: MouseEvent) =>
     :data-nodeid="nodeId"
     :data-handlepos="props.position"
     :class="[
-      'revue-flow__handle',
-      `revue-flow__handle-${props.position}`,
+      'vue-flow__handle',
+      `vue-flow__handle-${props.position}`,
       'nodrag',
       {
         source: props.type !== 'target',
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index b8c3b91e..80773a56 100644
--- a/src/components/Nodes/Node.vue
+++ b/src/components/Nodes/Node.vue
@@ -142,8 +142,8 @@ onMounted(() => {
     <div
       ref="node-element"
       :class="[
-        'revue-flow__node',
-        `revue-flow__node-${props.node.type}`,
+        'vue-flow__node',
+        `vue-flow__node-${props.node.type}`,
         {
           selected: props.selected,
           selectable: props.selectable,
diff --git a/src/components/NodesSelection/NodesSelection.vue b/src/components/NodesSelection/NodesSelection.vue
index 9a3eb361..cae73579 100644
--- a/src/components/NodesSelection/NodesSelection.vue
+++ b/src/components/NodesSelection/NodesSelection.vue
@@ -70,7 +70,7 @@ const onContextMenu = (event: MouseEvent) => {
 </script>
 <template>
   <div
-    class="revue-flow__nodesselection"
+    class="vue-flow__nodesselection"
     :style="{
       transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`,
     }"
@@ -83,7 +83,7 @@ const onContextMenu = (event: MouseEvent) => {
       @move="onDrag"
       @stop="onStop"
     >
-      <div class="revue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
+      <div class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
     </Draggable>
   </div>
 </template>
diff --git a/src/components/UserSelection/SelectionRect.vue b/src/components/UserSelection/SelectionRect.vue
index 9cf9f5ab..07097551 100644
--- a/src/components/UserSelection/SelectionRect.vue
+++ b/src/components/UserSelection/SelectionRect.vue
@@ -10,7 +10,7 @@ const props = defineProps<SelectionRectProps>()
 </script>
 <template>
   <div
-    class="revue-flow__selection"
+    class="vue-flow__selection"
     :style="{
       width: `${props.width}px`,
       height: `${props.height}px`,
diff --git a/src/components/UserSelection/UserSelection.vue b/src/components/UserSelection/UserSelection.vue
index 54cd68ea..c08c0d81 100644
--- a/src/components/UserSelection/UserSelection.vue
+++ b/src/components/UserSelection/UserSelection.vue
@@ -37,7 +37,7 @@ useEventListener(el, 'mouseup', onMouseUp)
 useEventListener(el, 'mouseleave', onMouseLeave)
 </script>
 <template>
-  <div ref="user-selection" class="revue-flow__selectionpane">
+  <div ref="user-selection" class="vue-flow__selectionpane">
     <SelectionRect
       v-if="store.userSelectionRect.draw"
       :width="store.userSelectionRect.width"
diff --git a/src/components/UserSelection/utils.ts b/src/components/UserSelection/utils.ts
index d1b3a918..81a00e0b 100644
--- a/src/components/UserSelection/utils.ts
+++ b/src/components/UserSelection/utils.ts
@@ -1,7 +1,7 @@
 import { XYPosition } from '~/types'
 
 export function getMousePosition(event: MouseEvent): XYPosition | void {
-  const revueFlowNode = (event.target as Element).closest('.revue-flow')
+  const revueFlowNode = (event.target as Element).closest('.vue-flow')
   if (!revueFlowNode) {
     return
   }
diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts
index ca9bd77a..5d3ccd99 100644
--- a/src/composables/useHandle.ts
+++ b/src/composables/useHandle.ts
@@ -64,8 +64,8 @@ export const checkElementBelowIsValid = (
 }
 
 const resetRecentHandle = (hoveredHandle: Element): void => {
-  hoveredHandle?.classList.remove('revue-flow__handle-valid')
-  hoveredHandle?.classList.remove('revue-flow__handle-connecting')
+  hoveredHandle?.classList.remove('vue-flow__handle-valid')
+  hoveredHandle?.classList.remove('vue-flow__handle-connecting')
 }
 
 export default () => {
@@ -82,8 +82,8 @@ export default () => {
     },
     elementEdgeUpdaterType?: HandleType,
   ) => {
-    const revueFlowNode = (event.target as Element).closest('.revue-flow')
-    // when revue-flow is used inside a shadow root we can't use document
+    const revueFlowNode = (event.target as Element).closest('.vue-flow')
+    // when vue-flow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target as HTMLElement)
 
     if (!doc) return
@@ -130,8 +130,8 @@ export default () => {
 
       if (!isOwnHandle && elementBelow) {
         recentHoveredHandle = elementBelow
-        elementBelow.classList.add('revue-flow__handle-connecting')
-        elementBelow.classList.toggle('revue-flow__handle-valid', isValid)
+        elementBelow.classList.add('vue-flow__handle-connecting')
+        elementBelow.classList.toggle('vue-flow__handle-valid', isValid)
       }
     }
 
diff --git a/src/composables/useUpdateNodeInternals.ts b/src/composables/useUpdateNodeInternals.ts
index 1eb2d120..9052709b 100644
--- a/src/composables/useUpdateNodeInternals.ts
+++ b/src/composables/useUpdateNodeInternals.ts
@@ -5,7 +5,7 @@ export default (): UpdateNodeInternals => {
   const store = useStore()
 
   return (id: ElementId) => {
-    const nodeElement: HTMLDivElement | null = document.querySelector(`.revue-flow__node[data-id="${id}"]`)
+    const nodeElement: HTMLDivElement | null = document.querySelector(`.vue-flow__node[data-id="${id}"]`)
 
     if (nodeElement) {
       store.updateNodeDimensions([{ id, nodeElement, forceUpdate: true }])
diff --git a/src/composables/useZoom.ts b/src/composables/useZoom.ts
index 524b8d95..5f629b23 100644
--- a/src/composables/useZoom.ts
+++ b/src/composables/useZoom.ts
@@ -149,13 +149,13 @@ export default (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZoom => {
 
           // when the target element is a node, we still allow zooming
           if (
-            ((event.target as Element).closest('.revue-flow__node') || (event.target as Element).closest('.revue-flow__edge')) &&
+            ((event.target as Element).closest('.vue-flow__node') || (event.target as Element).closest('.vue-flow__edge')) &&
             event.type !== 'wheel'
           )
             return false
 
           // when the target element is a node selection, we still allow zooming
-          if ((event.target as Element).closest('.revue-flow__nodesselection') && event.type !== 'wheel') return false
+          if ((event.target as Element).closest('.vue-flow__nodesselection') && event.type !== 'wheel') return false
 
           if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
 
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index 4ea9938f..4647dd94 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -29,7 +29,7 @@ const connectionLineVisible = computed(
 )
 </script>
 <template>
-  <svg :width="store.dimensions.width" :height="store.dimensions.height" class="revue-flow__edges">
+  <svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />
     <g
       :transform="store.transform.length && `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`"
diff --git a/src/container/EdgeRenderer/Marker.vue b/src/container/EdgeRenderer/Marker.vue
index b461f1f2..c2c6a807 100644
--- a/src/container/EdgeRenderer/Marker.vue
+++ b/src/container/EdgeRenderer/Marker.vue
@@ -8,7 +8,7 @@ const props = defineProps<MarkerProps>()
 <template>
   <marker
     :id="props.id"
-    class="revue-flow__arrowhead"
+    class="vue-flow__arrowhead"
     markerWidth="12.5"
     markerHeight="12.5"
     viewBox="-10 -10 20 20"
diff --git a/src/container/EdgeRenderer/MarkerDefinitions.vue b/src/container/EdgeRenderer/MarkerDefinitions.vue
index 2cbd2938..1117ccd8 100644
--- a/src/container/EdgeRenderer/MarkerDefinitions.vue
+++ b/src/container/EdgeRenderer/MarkerDefinitions.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
 </script>
 <template>
   <defs>
-    <Marker id="revue-flow__arrowclosed">
+    <Marker id="vue-flow__arrowclosed">
       <polyline
         :stroke="props.color"
         stroke-linecap="round"
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
         points="-5,-4 0,0 -5,4 -5,-4"
       />
     </Marker>
-    <Marker id="revue-flow__arrow">
+    <Marker id="vue-flow__arrow">
       <polyline
         :stroke="props.color"
         stroke-linecap="round"
diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
index fd2a8daf..81815265 100644
--- a/src/container/Flow/Flow.vue
+++ b/src/container/Flow/Flow.vue
@@ -132,7 +132,7 @@ const nodeTypes = createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })
 const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
 </script>
 <template>
-  <div class="revue-flow">
+  <div class="vue-flow">
     <ZoomPane
       :selection-key-code="props.selectionKeyCode"
       :zoom-activation-key-code="props.zoomActivationKeyCode"
diff --git a/src/container/NodeRenderer/NodeRenderer.vue b/src/container/NodeRenderer/NodeRenderer.vue
index ce7de637..e8177abb 100644
--- a/src/container/NodeRenderer/NodeRenderer.vue
+++ b/src/container/NodeRenderer/NodeRenderer.vue
@@ -40,7 +40,7 @@ const type = (node: TNode) => {
 </script>
 <template>
   <div
-    class="revue-flow__nodes"
+    class="vue-flow__nodes"
     :style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
   >
     <template v-for="node of getNodes" :key="node.id">
diff --git a/src/container/SelectionPane/SelectionPane.vue b/src/container/SelectionPane/SelectionPane.vue
index 2eff11c8..36cf0d58 100644
--- a/src/container/SelectionPane/SelectionPane.vue
+++ b/src/container/SelectionPane/SelectionPane.vue
@@ -52,5 +52,5 @@ useKeyPress(props.multiSelectionKeyCode, (keyPressed) => (store.multiSelectionAc
   <slot></slot>
   <UserSelection v-if="selectionKeyPresed && (store.selectionActive || store.elementsSelectable)" id="user-selection" />
   <NodesSelection v-if="store.nodesSelectionActive" id="nodes-selection" />
-  <div class="revue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
+  <div class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
 </template>
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index 2fd659a7..2150ce2b 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -58,7 +58,7 @@ hooks.load.trigger({
 })
 </script>
 <template>
-  <div ref="zoom-pane" class="revue-flow__renderer revue-flow__zoompane">
+  <div ref="zoom-pane" class="vue-flow__renderer vue-flow__zoompane">
     <slot v-bind="{ transform, dimensions: { width, height } }"></slot>
   </div>
 </template>
diff --git a/src/store/useFlowStore.ts b/src/store/useFlowStore.ts
index 2eab092b..a2af7790 100644
--- a/src/store/useFlowStore.ts
+++ b/src/store/useFlowStore.ts
@@ -15,7 +15,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
   setActivePinia(pinia)
 
   return defineStore({
-    id: `revue-flow-${Math.floor(Math.random() * 100)}`,
+    id: `vue-flow-${Math.floor(Math.random() * 100)}`,
     state: () => ({
       ...preloadedState,
     }),
diff --git a/src/style.css b/src/style.css
index e2c09169..f122d21d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,13 +1,13 @@
-.revue-flow {
+.vue-flow {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }
 
-.revue-flow__renderer,
-.revue-flow__pane,
-.revue-flow__selectionpane {
+.vue-flow__renderer,
+.vue-flow__pane,
+.vue-flow__selectionpane {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -15,25 +15,25 @@
   left: 0;
 }
 
-.revue-flow__pane {
+.vue-flow__pane {
   z-index: 1;
 }
 
-.revue-flow__renderer {
+.vue-flow__renderer {
   z-index: 4;
 }
 
-.revue-flow__selectionpane {
+.vue-flow__selectionpane {
   z-index: 5;
 }
 
-.revue-flow__selection {
+.vue-flow__selection {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-.revue-flow__edges {
+.vue-flow__edges {
   position: absolute;
   top: 0;
   left: 0;
@@ -41,7 +41,7 @@
   z-index: 2;
 }
 
-.revue-flow__edge {
+.vue-flow__edge {
   pointer-events: visibleStroke;
 
   &.inactive {
@@ -55,20 +55,20 @@
   }
 }
 
-.revue-flow__edge-path {
+.vue-flow__edge-path {
   fill: none;
 }
 
-.revue-flow__edge-textwrapper {
+.vue-flow__edge-textwrapper {
   pointer-events: all;
 }
 
-.revue-flow__edge-text {
+.vue-flow__edge-text {
   pointer-events: none;
   user-select: none;
 }
 
-.revue-flow__connection {
+.vue-flow__connection {
   pointer-events: none;
 
   .animated {
@@ -77,11 +77,11 @@
   }
 }
 
-.revue-flow__connection-path {
+.vue-flow__connection-path {
   fill: none;
 }
 
-.revue-flow__nodes {
+.vue-flow__nodes {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -90,14 +90,14 @@
   z-index: 3;
 }
 
-.revue-flow__node {
+.vue-flow__node {
   position: absolute;
   user-select: none;
   pointer-events: all;
   transform-origin: 0 0;
 }
 
-.revue-flow__nodesselection {
+.vue-flow__nodesselection {
   z-index: 3;
   position: absolute;
   width: 100%;
@@ -114,7 +114,7 @@
   }
 }
 
-.revue-flow__handle {
+.vue-flow__handle {
   pointer-events: none;
 
   &.connectable {
@@ -122,39 +122,39 @@
   }
 }
 
-.revue-flow__handle-bottom {
+.vue-flow__handle-bottom {
   top: auto;
   left: 50%;
   bottom: -4px;
   transform: translate(-50%, 0);
 }
 
-.revue-flow__handle-top {
+.vue-flow__handle-top {
   left: 50%;
   top: -4px;
   transform: translate(-50%, 0);
 }
 
-.revue-flow__handle-left {
+.vue-flow__handle-left {
   top: 50%;
   left: -4px;
   transform: translate(0, -50%);
 }
 
-.revue-flow__handle-right {
+.vue-flow__handle-right {
   right: -4px;
   top: 50%;
   transform: translate(0, -50%);
 }
 
-.revue-flow__edgeupdater {
+.vue-flow__edgeupdater {
   cursor: move;
   pointer-events: all;
 }
 
 /* additional components */
 
-.revue-flow__background {
+.vue-flow__background {
   position: absolute;
   top: 0;
   left: 0;
@@ -162,7 +162,7 @@
   height: 100%;
 }
 
-.revue-flow__controls {
+.vue-flow__controls {
   position: absolute;
   z-index: 5;
   bottom: 10px;
@@ -179,7 +179,7 @@
   }
 }
 
-.revue-flow__minimap {
+.vue-flow__minimap {
   position: absolute;
   z-index: 5;
   bottom: 10px;
diff --git a/src/theme-default.css b/src/theme-default.css
index 08d2245f..19e79642 100644
--- a/src/theme-default.css
+++ b/src/theme-default.css
@@ -1,11 +1,11 @@
-.revue-flow__selection {
+.vue-flow__selection {
   background: rgba(0, 89, 220, 0.08);
   border: 1px dotted rgba(0, 89, 220, 0.8);
 }
 
-.revue-flow__edge {
+.vue-flow__edge {
   &.selected {
-    .revue-flow__edge-path {
+    .vue-flow__edge-path {
       stroke: #555;
     }
   }
@@ -16,37 +16,37 @@
   }
 
   &.updating {
-    .revue-flow__edge-path {
+    .vue-flow__edge-path {
       stroke: #777;
     }
   }
 }
 
-.revue-flow__edge-path {
+.vue-flow__edge-path {
   stroke: #b1b1b7;
   stroke-width: 1;
 }
 
-.revue-flow__edge-text {
+.vue-flow__edge-text {
   font-size: 10px;
 }
 
-.revue-flow__edge-textbg {
+.vue-flow__edge-textbg {
   fill: white;
 }
 
-.revue-flow__connection-path {
+.vue-flow__connection-path {
   stroke: #b1b1b7;
   stroke-width: 1;
 }
 
-.revue-flow__node {
+.vue-flow__node {
   cursor: grab;
 }
 
-.revue-flow__node-default,
-.revue-flow__node-input,
-.revue-flow__node-output {
+.vue-flow__node-default,
+.vue-flow__node-input,
+.vue-flow__node-output {
   padding: 10px;
   border-radius: 3px;
   width: 150px;
@@ -57,15 +57,15 @@
   border-style: solid;
 }
 
-.revue-flow__node-default.selectable,
-.revue-flow__node-input.selectable,
-.revue-flow__node-output.selectable {
+.vue-flow__node-default.selectable,
+.vue-flow__node-input.selectable,
+.vue-flow__node-output.selectable {
   &:hover {
     box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   }
 }
 
-.revue-flow__node-input {
+.vue-flow__node-input {
   background: #fff;
   border-color: #0041d0;
 
@@ -74,12 +74,12 @@
     box-shadow: 0 0 0 0.5px #0041d0;
   }
 
-  .revue-flow__handle {
+  .vue-flow__handle {
     background: #0041d0;
   }
 }
 
-.revue-flow__node-default {
+.vue-flow__node-default {
   background: #fff;
   border-color: #1a192b;
 
@@ -88,12 +88,12 @@
     box-shadow: 0 0 0 0.5px #1a192b;
   }
 
-  .revue-flow__handle {
+  .vue-flow__handle {
     background: #1a192b;
   }
 }
 
-.revue-flow__node-output {
+.vue-flow__node-output {
   background: #fff;
   border-color: #ff0072;
 
@@ -102,17 +102,17 @@
     box-shadow: 0 0 0 0.5px #ff0072;
   }
 
-  .revue-flow__handle {
+  .vue-flow__handle {
     background: #ff0072;
   }
 }
 
-.revue-flow__nodesselection-rect {
+.vue-flow__nodesselection-rect {
   background: rgba(0, 89, 220, 0.08);
   border: 1px dotted rgba(0, 89, 220, 0.8);
 }
 
-.revue-flow__handle {
+.vue-flow__handle {
   position: absolute;
   width: 6px;
   height: 6px;
@@ -125,11 +125,11 @@
   }
 }
 
-.revue-flow__minimap {
+.vue-flow__minimap {
   background-color: #fff;
 }
 
-.revue-flow__controls {
+.vue-flow__controls {
   box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 
   &-button {