Toolbar

Show the toolbar you want. Pick a preset, hand-roll one, or add your own buttons.

Presets

<RichTextEditor toolbar="minimal" />
<RichTextEditor toolbar="basic" />
<RichTextEditor toolbar="all" />

Build your own

<RichTextEditor
  toolbar={[
    "undo", "redo", "|",
    "bold", "italic", "underline", "|",
    "heading", "|",
    "link", "image",
  ]}
/>

Built-in IDs

Use any of these strings in your toolbar array. | renders a vertical separator.

undoredoheadingparagraphbolditalicunderlinestrikesubsupcolorTextcolorBgalignLeftalignCenteralignRightalignJustifyulolchecklistindentoutdentquotecodecodeblockhrlinkimagetableclear|

Custom buttons

import { Sparkles } from "lucide-react"

<RichTextEditor
  customButtons={[
    {
      id: "ai",
      title: "AI assist",
      icon: <Sparkles size={16} />,
      onClick: () => console.log("✨"),
    },
  ]}
/>

Mix custom into a custom layout

<RichTextEditor
  toolbar={["bold", "italic", "|", "link", "image"]}
  customButtons={[
    { id: "ai", title: "AI", icon: <Sparkles size={16} />, onClick: () => {} },
  ]}
/>