Saturation UI - Component Library

Components

Novel Editor

A Notion-style WYSIWYG editor built with Tiptap and Tailwind CSS. Features slash commands, bubble menus, and AI-powered writing assistance.

Installation

Install the Novel package from npm:

npm install novel

Novel is built on top of Tiptap and works seamlessly with shadcn/ui components. It includes:

EditorRoot - Main wrapper component
EditorContent - The editor content area
EditorCommand - Slash command menu
EditorBubble - Floating text formatting toolbar
useEditor - Hook to access Tiptap editor methods

Examples

Basic Editor

import { EditorRoot, EditorContent } from 'novel'

export function BasicEditor() {
  return (
    <EditorRoot>
      <EditorContent
        className="rounded-lg border bg-background p-4 min-h-[200px]"
        initialContent={{
          type: "doc",
          content: [
            {
              type: "paragraph",
              content: [{ type: "text", text: "Start typing..." }]
            }
          ]
        }}
      />
    </EditorRoot>
  )
}

With Slash Commands

Type "/" to open the command menu with formatting options, headings, lists, and more.

import { EditorRoot, EditorContent, EditorCommand, EditorCommandItem } from 'novel'

export function EditorWithCommands() {
  return (
    <EditorRoot>
      <EditorContent className="rounded-lg border bg-background p-4 min-h-[200px]" />
      <EditorCommand className="z-50 rounded-md border bg-background shadow-md">
        <EditorCommandItem
          value="heading1"
          onCommand={(editor) => editor.chain().focus().toggleHeading({ level: 1 }).run()}
        >
          <span className="font-bold">H1</span> Heading 1
        </EditorCommandItem>
        <EditorCommandItem
          value="bulletList"
          onCommand={(editor) => editor.chain().focus().toggleBulletList().run()}
        >
          • Bullet List
        </EditorCommandItem>
      </EditorCommand>
    </EditorRoot>
  )
}

With Bubble Menu

Select text to see the floating toolbar with formatting options.

import { EditorRoot, EditorContent, EditorBubble, EditorBubbleItem } from 'novel'

export function EditorWithBubble() {
  return (
    <EditorRoot>
      <EditorContent className="rounded-lg border bg-background p-4 min-h-[200px]" />
      <EditorBubble className="flex rounded-md border bg-background shadow-xl">
        <EditorBubbleItem
          onSelect={(editor) => editor.chain().focus().toggleBold().run()}
          className="p-2 hover:bg-accent"
        >
          <span className="font-bold">B</span>
        </EditorBubbleItem>
        <EditorBubbleItem
          onSelect={(editor) => editor.chain().focus().toggleItalic().run()}
          className="p-2 hover:bg-accent"
        >
          <span className="italic">I</span>
        </EditorBubbleItem>
      </EditorBubble>
    </EditorRoot>
  )
}

API Reference

Component	Description
EditorRoot	Main wrapper component that provides editor context
EditorContent	The actual editor content area where users type
EditorCommand	Slash command menu for quick formatting and insertions
EditorBubble	Floating toolbar that appears on text selection
useEditor	Hook to access all Tiptap editor methods and state

Note: Novel requires the novel package to be installed via npm. Live previews are not available in the v0 environment. Visit novel.sh for full documentation and live demos.

On This Page

Installation
Examples
Basic Editor
With Slash Commands
With Bubble Menu
API Reference

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.