diff --git a/demos/src/Nodes/Blockquote/React/index.html b/demos/src/Nodes/Blockquote/React/index.html
new file mode 100644
index 000000000..cd08208df
--- /dev/null
+++ b/demos/src/Nodes/Blockquote/React/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from "../../../../setup/react.ts";
+      import source from "@source";
+      setup("Nodes/Blockquote", source);
+    </script>
+  </body>
+</html>
diff --git a/demos/src/Nodes/Blockquote/React/index.jsx b/demos/src/Nodes/Blockquote/React/index.jsx
new file mode 100644
index 000000000..1413a3f04
--- /dev/null
+++ b/demos/src/Nodes/Blockquote/React/index.jsx
@@ -0,0 +1,48 @@
+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 Blockquote from '@tiptap/extension-blockquote'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [Document, Paragraph, Text, Blockquote],
+    content: `
+          <blockquote>
+            Nothing is impossible, the word itself says “I’m possible!”
+          </blockquote>
+          <p>Audrey Hepburn</p>
+        `,
+  })
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <div>
+      <button
+        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+        className={editor.isActive('blockquote') ? 'is-active' : ''}
+      >
+        toggleBlockquote
+      </button>
+      <button
+        onClick={() => editor.chain().focus().setBlockquote().run()}
+        disabled={editor.isActive('blockquote')}
+      >
+        setBlockquote
+      </button>
+      <button
+        onClick={() => editor.chain().focus().unsetBlockquote().run()}
+        disabled={!editor.isActive('blockquote')}
+      >
+        unsetBlockquote
+      </button>
+
+      <EditorContent editor={editor} />
+    </div>
+  )
+}
diff --git a/demos/src/Nodes/Blockquote/React/index.spec.js b/demos/src/Nodes/Blockquote/React/index.spec.js
new file mode 100644
index 000000000..e51b79cbf
--- /dev/null
+++ b/demos/src/Nodes/Blockquote/React/index.spec.js
@@ -0,0 +1,85 @@
+context('/src/Nodes/Blockquote/React/', () => {
+  before(() => {
+    cy.visit('/src/Nodes/Blockquote/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p>')
+      cy.get('.ProseMirror').type('{selectall}')
+    })
+  })
+
+  it('should parse blockquote tags correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<blockquote><p>Example Text</p></blockquote>')
+      expect(editor.getHTML()).to.eq('<blockquote><p>Example Text</p></blockquote>')
+    })
+  })
+
+  it('should parse blockquote tags without paragraphs correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<blockquote>Example Text</blockquote>')
+      expect(editor.getHTML()).to.eq('<blockquote><p>Example Text</p></blockquote>')
+    })
+  })
+
+  it('the button should make the selected line a blockquote', () => {
+    cy.get('.ProseMirror blockquote').should('not.exist')
+
+    cy.get('button:first').click()
+
+    cy.get('.ProseMirror').find('blockquote').should('contain', 'Example Text')
+  })
+
+  it('the button should wrap all nodes in one blockquote', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p><p>Example Text</p>')
+      cy.get('.ProseMirror').type('{selectall}')
+    })
+
+    cy.get('button:first').click()
+
+    cy.get('.ProseMirror').find('blockquote').should('have.length', 1)
+  })
+
+  it('the button should toggle the blockquote', () => {
+    cy.get('.ProseMirror blockquote').should('not.exist')
+
+    cy.get('button:first').click()
+
+    cy.get('.ProseMirror').find('blockquote').should('contain', 'Example Text')
+
+    cy.get('.ProseMirror').type('{selectall}')
+
+    cy.get('button:first').click()
+
+    cy.get('.ProseMirror blockquote').should('not.exist')
+  })
+
+  it('should make the selected line a blockquote when the keyboard shortcut is pressed', () => {
+    cy.get('.ProseMirror')
+      .trigger('keydown', { shiftKey: true, modKey: true, key: 'b' })
+      .find('blockquote')
+      .should('contain', 'Example Text')
+  })
+
+  it('should toggle the blockquote when the keyboard shortcut is pressed', () => {
+    cy.get('.ProseMirror blockquote').should('not.exist')
+
+    cy.get('.ProseMirror')
+      .trigger('keydown', { shiftKey: true, modKey: true, key: 'b' })
+      .find('blockquote')
+      .should('contain', 'Example Text')
+
+    cy.get('.ProseMirror')
+      .type('{selectall}')
+      .trigger('keydown', { shiftKey: true, modKey: true, key: 'b' })
+
+    cy.get('.ProseMirror blockquote').should('not.exist')
+  })
+
+  it('should make a blockquote from markdown shortcuts', () => {
+    cy.get('.ProseMirror').type('> Quote').find('blockquote').should('contain', 'Quote')
+  })
+})
diff --git a/demos/src/Nodes/Blockquote/React/styles.scss b/demos/src/Nodes/Blockquote/React/styles.scss
new file mode 100644
index 000000000..83e199ede
--- /dev/null
+++ b/demos/src/Nodes/Blockquote/React/styles.scss
@@ -0,0 +1,11 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  blockquote {
+    border-left: 3px solid rgba(#0d0d0d, 0.1);
+    padding-left: 1rem;
+  }
+}
