diff --git a/demos/src/Extensions/Dropcursor/React/index.html b/demos/src/Extensions/Dropcursor/React/index.html
new file mode 100644
index 00000000..707bc0cb
--- /dev/null
+++ b/demos/src/Extensions/Dropcursor/React/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/src/Extensions/Dropcursor/React/index.jsx b/demos/src/Extensions/Dropcursor/React/index.jsx
new file mode 100644
index 00000000..bb047763
--- /dev/null
+++ b/demos/src/Extensions/Dropcursor/React/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Dropcursor from '@tiptap/extension-dropcursor'
+import Image from '@tiptap/extension-image'
+import './styles.scss'
+
+export default () => {
+ const editor = useEditor({
+ extensions: [Document, Paragraph, Text, Image, Dropcursor],
+ content: `
+ Try to drag around the image. While you drag, the editor should show a decoration under your cursor. The so called dropcursor.
+ 
+ `,
+ })
+
+ return
+}
diff --git a/demos/src/Extensions/Dropcursor/React/index.spec.js b/demos/src/Extensions/Dropcursor/React/index.spec.js
new file mode 100644
index 00000000..406ed1f8
--- /dev/null
+++ b/demos/src/Extensions/Dropcursor/React/index.spec.js
@@ -0,0 +1,7 @@
+context('/src/Examples/Dropcursor/React/', () => {
+ before(() => {
+ cy.visit('/src/Examples/Dropcursor/React/')
+ })
+
+ // TODO: Write tests
+})
diff --git a/demos/src/Extensions/Dropcursor/React/styles.scss b/demos/src/Extensions/Dropcursor/React/styles.scss
new file mode 100644
index 00000000..23deef10
--- /dev/null
+++ b/demos/src/Extensions/Dropcursor/React/styles.scss
@@ -0,0 +1,11 @@
+/* Basic editor styles */
+.ProseMirror {
+ > * + * {
+ margin-top: 0.75em;
+ }
+
+ img {
+ height: auto;
+ max-width: 100%;
+ }
+}