All Rich Text Editor Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

• Rich Text Editor 1 Tiptap Document Editor With Formatting Toolbar, Link Bubble and Task Lists
• Rich Text Editor 2 Tiptap Page Editor With Slash Commands, Mentions, Tables and an Outline Rail
• Rich Text Editor 3 Tiptap Contract Redline Editor With Suggesting Mode and a Sticky Review Margin
• Rich Text Editor 4 Tiptap Collaborative Editor With Live Cursors, Presence, Offline Merge and Comments
• Rich Text Editor 5 Tiptap AI Document Assistant With Streamed Suggestions, Step Trace and Review Dock

The Parts Tiptap Leaves to You

Every block ships the same kit files, so the toolbar's keyboard handling and the link field behave the same in each of them, and highlights and task lists do too wherever a block keeps them.

The toolbar is a single tab stop with arrow key movement inside it, tooltips name each shortcut in Kbd keys, and on a narrow screen the bar scrolls sideways behind a fade instead of wrapping. Links open in a popover built on InputGroup that takes a web address, a bare domain, mailto or tel, shows an inline error for anything else, and comes back as a bubble at the caret with the address, edit and remove.

Highlights come in 5 colors stored as a color id rather than inline CSS, so the theme paints each one with a light and a dark pair. Task items tick with the shadcn Checkbox and nest with Tab. Content is styled from the editor wrapper, which keeps the exported HTML free of presentational classes. The contract redline leaves out strike, code, highlights and task lists, which would look like redline marks but are never tracked, and the co-edited spec drops highlights so they are not read as comment anchors.

State is read through a selector per concern, a formatting snapshot for the toolbar and a count snapshot for the footer, so a keystroke re-renders the word count and not the whole bar. Every editor passes immediatelyRender: false and holds a Skeleton in its place until the editor exists, so a server rendered page hydrates without a mismatch and the layout does not jump on load.

A Framed Document and a Notion Style Page

The first 2 blocks are the everyday shapes: a document inside your app screen, and a page that flows in its host.

The launch brief sits in a ReUI Frame with a header, a fixed toolbar, a scrolling body and a footer with live word, character and reading time counts. The bar carries undo and redo, text and 3 heading levels, 5 marks, highlight, link, bullet, numbered and task lists, quote, code block, divider and alignment, and a Shortcuts popover in the footer lists the keys and the Markdown rules, such as # and Space for a heading. A document menu switches between editing and view only, copies the document as HTML or plain text, and clears it behind a confirm with an Undo toast.

The escalation playbook drops the frame. Typing / opens a command menu of 12 blocks, from headings and to-do lists to a table and a live Contents block, and @ opens a list of teammates with avatars and roles. Selecting text raises a format bubble, and a gutter beside the hovered block adds a block below it or opens a menu to turn it into another type, duplicate it, move it up or down, or delete it, with the same grip dragging it to a new place.

Tables resize by dragging a column edge and carry a bar to add a row or a column, toggle the header row, delete a row or a column, or delete the table behind a confirm. On wide screens the headings become an outline rail on the right edge that opens into the full list on hover or focus, and a header popover carries the same outline on phones. The page menu adds full width, small text and a page lock.

Suggestions You Accept or Reject

2 blocks share a suggestion engine, written as ProseMirror plugins on the open source packages with no paid extension behind it.

The services agreement opens in suggesting mode. Typing becomes an insert, deleting strikes the text in place instead of removing it, and typing over a selection becomes a replace, each stamped with its author and time. A review margin lists every change with accept and reject, plus Accept All or Reject All behind a confirm, and moves into a Sheet below 1024px, while previous and next buttons in the sticky header step through the changes. All markup, Final and Original switch the page between the redline and either clean version, and the export menu copies the redline as HTML with ins and del tags, or the final or original text. Formatting, block type changes and paragraph splits apply directly, so the review list stays about the words.

The rollout plan puts the same engine under an assistant. A dock floating over the bottom of the page offers 6 tasks: fix spelling, tighten wording, write a summary, add a checklist, list open questions and list owners, and 3 of them can be limited to a selected passage, where a bubble above the text runs Tighten or Fix Spelling directly or hands the passage to the dock. Typing a request picks the matching task by keyword, and a request it cannot match is answered with 3 suggested tasks. A run shows its steps as they happen, can be stopped, and writes its edits into the text as suggestions behind a labelled caret. Review then steps through each edit as a was and now pair with accept, reject, accept all and reject all, and the last decision undoes in a single step. The 2 review tasks answer with findings that jump to their text and edit nothing.

The assistant has no model behind it. A local planner works from fixtures in the block's data file (known typos, 2 canned rewrites, a fixed summary and a fixed checklist), and the 2 review tasks scan the text for questions, TBDs and tasks that name a teammate. The preview runs with no API key, and the block marks the planners behind planAction as the part to swap for your own model's tool calls.

Live Co-Editing on Yjs, With Your Own Provider

The shared spec runs the open source Yjs stack, not a hosted collaboration service.

It binds @tiptap/extension-collaboration and @tiptap/extension-collaboration-caret to a Yjs document, so teammates show as named carets and selections, a presence stack reports who is editing, viewing or idle, and clicking a face follows that teammate's caret down the page. Comment threads live in the same shared document: select text to open one, reply, and resolve with an Undo toast, and every client sees the change. Undo reverts only your own edits, never a teammate's.

The Online switch takes you offline. Your edits queue locally while teammates keep writing, and switching back syncs the queue and names whose edits were merged in. Yjs is a CRDT, so the merge has no conflicts to settle by hand.

In the preview the room is an in-memory stand-in for a provider and the teammates are scripted, so it runs with no server, and a Replay action restarts the session. The editor binds only a Yjs document and an awareness instance, which is the seam where Hocuspocus, y-websocket or Liveblocks plugs in.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

• Shadcn Application Blocks (344) Browse 344 Shadcn Application blocks across 24 categories.
• Shadcn Data Grid Blocks (39) Browse 39 Shadcn Data Grid blocks across 8 categories.
• Shadcn Solutions Blocks (74) Browse 74 Shadcn Solutions blocks across 10 categories.
• Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
• Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
• Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 categories.