RichTextEditor

Pro

WYSIWYG editor with formatting toolbar.

formeditortext

Import

import { RichTextEditor } from "@/components/ui";

Basic Usage

RichTextEditor Preview

0 words

Code

tsx

const [content, setContent] = useState("");

return (
  <RichTextEditor
    value={content}
    onChange={setContent}
    placeholder="Write your content here..."
  />
);

Custom Toolbar

Customize available formatting options

1<RichTextEditor
2  value={content}
3  onChange={setContent}
4  toolbar={["bold", "italic", "underline", "link", "bulletList", "orderedList"]}
5/>

With Form

Inside a form with validation

1<FieldWrapper label="Description" error={errors.description}>
2  <RichTextEditor
3    value={description}
4    onChange={setDescription}
5    placeholder="Describe your project..."
6  />
7</FieldWrapper>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring