diff --git a/skore-ui/src/components/RichTextEditor.vue b/skore-ui/src/components/RichTextEditor.vue
new file mode 100644
index 000000000..baa85c3b0
--- /dev/null
+++ b/skore-ui/src/components/RichTextEditor.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="rich-text-editor"></div>
+</template>
+
+<style lang="css" scoped>
+.rich-text-editor {
+  color: var(--color-text-secondary);
+}
+</style>
diff --git a/skore-ui/src/views/ComponentsView.vue b/skore-ui/src/views/ComponentsView.vue
index cb5942fbb..163c66fea 100644
--- a/skore-ui/src/views/ComponentsView.vue
+++ b/skore-ui/src/views/ComponentsView.vue
@@ -23,6 +23,7 @@ import FloatingTooltip from "@/components/FloatingTooltip.vue";
 import HtmlSnippetWidget from "@/components/HtmlSnippetWidget.vue";
 import ImageWidget from "@/components/ImageWidget.vue";
 import MarkdownWidget from "@/components/MarkdownWidget.vue";
+import RichTextEditor from "@/components/RichTextEditor.vue";
 import SectionHeader from "@/components/SectionHeader.vue";
 import SimpleButton from "@/components/SimpleButton.vue";
 import SlideToggle from "@/components/SlideToggle.vue";
@@ -1379,6 +1380,9 @@ const toggleModel = ref(true);
         </div>
         <div>toggles are {{ toggleModel }}</div>
       </TabPanelContent>
+      <TabPanelContent name="rich edit">
+        <RichTextEditor />
+      </TabPanelContent>
     </TabPanel>
   </main>
 </template>