Rich Text Editor React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Rich Text Editor is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import RichTextEditor from @/components/ui/rich-text-editor.

import { useState } from "react"
import { RichTextEditor, type RichTextValue } from "@/components/ui/rich-text-editor"

const team = [
  { id: "mihai-ionescu", label: "Michael Reed", description: "Sales" },
  { id: "ioana-dumitrescu", label: "Julia Davis", description: "Accounting" },
]

export function ClientNote() {
  const [note, setNote] = useState<RichTextValue>("<h2>Meeting, Sep 24, 2026</h2><p>The quote for <strong>Tech Solutions LLC</strong>.</p>")
  return (
    <RichTextEditor
      label="Client note"
      value={note}
      onValueChange={setNote}
      placeholder="Write a note…"
      showCount="both"
      characterLimit={2000}
      mentions={{ items: (q) => team.filter((p) => p.label.toLowerCase().includes(q.toLowerCase())) }}
      onImageUpload={async (file) => URL.createObjectURL(file)}
    />
  )
}

Props

• value
  string | JSONContent

  The controlled content in `format`: an HTML string, a Markdown string, or Tiptap JSON. An empty editor is "" (HTML and Markdown). A value that differs from the last one the editor emitted (a reset, a load) replaces the content; echoing the emitted value back never resets the caret.

• defaultValuedefault ""
  string | JSONContent

  The starting content while uncontrolled. A form reset puts it back.

• onValueChange
  (value: string | JSONContent, editor: Editor) => void

  Fires updateDebounce ms after the last change (and at once when the editor loses focus), with the content serialized in `format`.

• formatdefault "html"
  "html" | "json" | "markdown"

  What value, defaultValue and onValueChange speak. markdown parses and writes Markdown through @tiptap/markdown; switching at runtime carries the current document over.

• updateDebouncedefault 150
  number

  Milliseconds between the last keystroke and onValueChange, so serializing a long document never slows typing. 0 fires on every change.

• placeholderdefault "Write something…"
  string

  Shown while the editor is empty. An empty heading shows labels.headingPlaceholder instead.

• toolbardefault true
  boolean | RichTextToolbarItem[]

  true shows DEFAULT_TOOLBAR, false hides it (keys and Markdown shortcuts still work), or pass the items in order with "|" between groups: "undo", "redo", "heading", "paragraph", "bold", "italic", "underline", "strike", "code", "bulletList", "orderedList", "taskList", "link", "blockquote", "codeBlock", "horizontalRule", "image".

• toolbarPositiondefault "top"
  "top" | "bottom"

  bottom puts the toolbar under the text, the comment box look.

• stickyToolbardefault true
  boolean

  The top toolbar sticks under the page's top bar (top: var(--topbar-offset, 0px)) while a long document scrolls with the page, and turns to frosted glass once stuck.

• bubbleMenudefault true
  boolean

  A small menu above selected text (bold, italic, strikethrough, code, link) on mouse and trackpad screens. Phones keep their own selection menus.

• markdownShortcutsdefault true
  boolean

  Formats as you type (# , - , [] , > , ```, **bold**) and when Markdown-looking text is pasted. Off: every character stays literal.

• headingLevelsdefault "[1, 2, 3]"
  (1 | 2 | 3 | 4)[]

  The headings the text style menu offers and the schema allows.

• characterLimitdefault 0
  number

  Stops input at this many characters and drives the counter's warning colors. 0 is no limit.

• showCountdefault "none"
  "none" | "characters" | "words" | "both"

  The footer counter, in the locale's numbers ("1.240 caractere · 212 cuvinte"); with a limit it reads "1.240 / 2.000" and turns amber at 90% and red at 100%, and a screen reader hears it only when it crosses those two marks.

• minHeightdefault 160
  number

  Minimum height of the text area in px. Before the editor mounts, the box already has this height, so nothing jumps.

• maxHeightdefault 0
  number

  Past this height in px the text scrolls inside the box. 0 grows with the content and the page scrolls.

• onImageUpload
  (file: File, options: { onProgress: (progress: number) => void; signal: AbortSignal }) => Promise<string>

  Uploads a picked, pasted or dropped image and resolves its URL. A dimmed preview with a progress bar holds the spot meanwhile; a rejection removes it and announces labels.uploadFailed. Without it the image button asks for an image address.

• imageAcceptdefault "image/*"
  string

  Accepted image types, in the file input's accept syntax; pasted and dropped files are checked against it too.

• maxImageSizedefault 10485760
  number

  Largest image in bytes (10 MB); bigger files are refused with labels.imageTooLarge. 0 accepts any size.

• mentions
  RichTextMentions ({ items: (query: string) => MentionItem[] | Promise<MentionItem[]>; trigger?: string; onMention?: (item: MentionItem) => void })

  Turns on @mentions. items gets the text after the trigger ("@" by default); a promise is awaited with a 120ms pause between keystrokes. Rows show an Avatar, the name and a description; picked people become chips with data-id, styled by the exported MENTION classes.

• extensionsdefault "[]"
  AnyExtension[]

  Extra Tiptap extensions, appended after the built-in ones. Read when the editor is created; a change in their names recreates it.

• autofocusdefault false
  boolean | "start" | "end"

  Focuses the editor once it mounts, with the caret at the start or the end.

• spellCheckdefault true
  boolean

  The browser's spell checking on the text.

• setApi
  (api: RichTextEditorApi) => void

  Called after mount with { editor, getHTML, getJSON, getMarkdown, getText, focus(position?), clear(), insertContent(content), isEmpty() }. editor is the Tiptap instance for anything else.

• labeldefault ""
  ReactNode

  The field label above the box; a click on it focuses the text.

• descriptiondefault ""
  ReactNode

  Helper text under the box, linked with aria-describedby.

• errordefault ""
  ReactNode

  Replaces the description and marks the field invalid.

• requireddefault false
  boolean

  The asterisk after the label and aria-required on the text.

• invaliddefault false
  boolean

  The invalid ring and aria-invalid without a message.

• disableddefault false
  boolean

  Dims the box; the text cannot be edited or focused.

• readOnlydefault false
  boolean

  Renders the content with the same styles and no toolbar or bubble menu: links open in a new tab, checkboxes are locked, the box keeps its variant so a note still reads as a document. To show saved HTML without an editor, put the exported PROSE classes on its wrapper.

• sizedefault "md"
  "sm" | "md" | "lg"

  Text 14 / 15 / 16px (16px on phones at every size) with matching padding and toolbar buttons (28 / 32 / 40px).

• variantdefault "outline"
  "soft" | "outline" | "ghost"

  outline draws a hairline (a document editor reads best framed), soft is the filled field well, ghost is borderless for a page that is the document.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner radius of the box as a surface: 0, 12, 16 or 24px; full falls back to lg.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Colors the pressed toolbar buttons, mention chips, checked boxes, the upload bar, the selection and the caret.

• colordefault ""
  string

  Any CSS color; replaces the tone.

• localedefault ""
  string

  Locale of the counter's numbers (1,240 in en-US). Empty uses the UIProvider's, then the browser's.

• namedefault ""
  string

  Adds a hidden input with the value in `format` (JSON stringified) for plain form posts.

• id
  string

  The id of the editable element, which the label points to.

• fieldProps
  Partial<FieldProps>

  Anything else for the Field wrapper: optional, labelAction, orientation, hideLabel.

• labels
  Partial<RichTextEditorLabels>

  Every string, English by default (DEFAULT_RICH_TEXT_EDITOR_LABELS): button names (bold "Bold", heading "Text style", paragraph "Normal text", heading1 to heading4, …), link editor (linkPlaceholder, openLink, removeLink, apply, invalidLink, imageUrl), uploads (uploading, uploaded, uploadFailed, imageTooLarge, imageType), counts as functions (characters(count, formatted), words(count, formatted), limit(count, max, formatted, formattedMax), limitNear(remaining, formatted)), limitReached, mentions, noMentions, searching, toolbar, moreFormatting, content (the text's name without a label).

• classNames
  Partial<Record<"field" | "label" | "description" | "error" | "counter" | "box" | "toolbar" | "button" | "heading" | "content" | "bubble" | "link" | "mentions" | "footer" | "count" | "docked", string>>

  Extra classes for the parts.

• className
  string

  Extra classes for the box (the Field wrapper when a label, description or error is set).

Parts

FAQ

Used in

More React form components