---
name: "@prosekit"
slug: "prosekit"
description: "ProseKit is a framework-agnostic rich-text editor toolkit built on ProseMirror, supporting React, Vue, Preact, Svelte, and SolidJS. The extensions package covers bold, italic, underline, strike, code, code-block, heading, blockquote, horizontal-rule, lists, links, images, file, math, table, mention, autocomplete, search, placeholder, highlight, text-align, text-color, background-color, yjs (collaboration), and more (~40 extensions). The shadcn registry distributes a full-featured example editor and framework variants. Free and open-source (MIT). Use for: adding a framework-flexible ProseMirror-based editor when you need multi-framework support or a lower-level alternative to Plate."
category: "Editor (rich text/code)"
tags: ["accessibility", "backgrounds", "blocks", "buttons", "cards", "charts", "components", "crypto", "editor", "loaders", "maps", "media", "navigation", "overlays", "tables", "theming"]
framework: "vue"
license: "MIT"
author: "prosekit"
website: "https://prosekit.dev"
github: "https://github.com/prosekit/prosekit"
registry: "https://prosekit.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 1134
component_count: 250
generated_at: "2026-07-28T08:00:50.948Z"
---

# @prosekit

ProseKit is a framework-agnostic rich-text editor toolkit built on ProseMirror, supporting React, Vue, Preact, Svelte, and SolidJS. The extensions package covers bold, italic, underline, strike, code, code-block, heading, blockquote, horizontal-rule, lists, links, images, file, math, table, mention, autocomplete, search, placeholder, highlight, text-align, text-color, background-color, yjs (collaboration), and more (~40 extensions). The shadcn registry distributes a full-featured example editor and framework variants. Free and open-source (MIT). Use for: adding a framework-flexible ProseMirror-based editor when you need multi-framework support or a lower-level alternative to Plate.

## Links

- Website: https://prosekit.dev
- GitHub: https://github.com/prosekit/prosekit
- Registry JSON: https://prosekit.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/prosekit
- This file: https://sh4dcn.vercel.app/md/prosekit.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://prosekit.dev/r/registry.json
pnpm dlx shadcn@latest add https://prosekit.dev/r/registry.json
bunx shadcn@latest add https://prosekit.dev/r/registry.json
# clone the source repo
git clone https://github.com/prosekit/prosekit.git
# fetch the raw registry index
curl -s https://prosekit.dev/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| react-example-block-handle | registry:block | A handle that appears on hover, allowing you to drag and re-order blocks. | `npx shadcn@latest add https://prosekit.dev/r/react-example-block-handle.json` |
| react-example-blockquote | registry:block | Example for blockquote node. | `npx shadcn@latest add https://prosekit.dev/r/react-example-blockquote.json` |
| react-example-bold | registry:block | Example for bold mark. | `npx shadcn@latest add https://prosekit.dev/r/react-example-bold.json` |
| react-example-change-tracking | registry:block | Track and commit document changes with version history. | `npx shadcn@latest add https://prosekit.dev/r/react-example-change-tracking.json` |
| react-example-code | registry:block | Example for inline code mark. | `npx shadcn@latest add https://prosekit.dev/r/react-example-code.json` |
| react-example-code-block | registry:block | Code block with syntax highlighting and a Mermaid diagram preview. | `npx shadcn@latest add https://prosekit.dev/r/react-example-code-block.json` |
| react-example-code-block-themes | registry:block | Code block with multiple syntax highlighting themes. | `npx shadcn@latest add https://prosekit.dev/r/react-example-code-block-themes.json` |
| react-example-drop-cursor | registry:block | Visual cursor indicator during drag-and-drop operations. | `npx shadcn@latest add https://prosekit.dev/r/react-example-drop-cursor.json` |
| react-example-emoji-rules | registry:block | Auto-convert text shortcuts to emojis using input rules. | `npx shadcn@latest add https://prosekit.dev/r/react-example-emoji-rules.json` |
| react-example-font-family | registry:block | Change the font family of text. | `npx shadcn@latest add https://prosekit.dev/r/react-example-font-family.json` |
| react-example-full | registry:block | Full-featured editor with most available features enabled. | `npx shadcn@latest add https://prosekit.dev/r/react-example-full.json` |
| react-example-gap-cursor | registry:block | Cursor navigation between non-text block elements. | `npx shadcn@latest add https://prosekit.dev/r/react-example-gap-cursor.json` |
| react-example-hard-break | registry:block | Example for hard line break node. | `npx shadcn@latest add https://prosekit.dev/r/react-example-hard-break.json` |
| react-example-heading | registry:block | Example for heading node with multiple levels. | `npx shadcn@latest add https://prosekit.dev/r/react-example-heading.json` |
| react-example-highlight | registry:block | Example for highlighting text (like a highlighter pen). | `npx shadcn@latest add https://prosekit.dev/r/react-example-highlight.json` |
| react-example-horizontal-rule | registry:block | Example for horizontal rule node. | `npx shadcn@latest add https://prosekit.dev/r/react-example-horizontal-rule.json` |
| react-example-image-view | registry:block | Custom image node views with resize support. | `npx shadcn@latest add https://prosekit.dev/r/react-example-image-view.json` |
| react-example-inline-menu | registry:block | Inline formatting menu that appears on text selection. | `npx shadcn@latest add https://prosekit.dev/r/react-example-inline-menu.json` |
| react-example-italic | registry:block | Example for italic mark. | `npx shadcn@latest add https://prosekit.dev/r/react-example-italic.json` |
| react-example-katex | registry:block | Math equation rendering using the KaTeX library. | `npx shadcn@latest add https://prosekit.dev/r/react-example-katex.json` |
| react-example-keymap | registry:block | Custom keyboard shortcuts and key bindings. | `npx shadcn@latest add https://prosekit.dev/r/react-example-keymap.json` |
| react-example-link | registry:block | Example for link mark with URL input. | `npx shadcn@latest add https://prosekit.dev/r/react-example-link.json` |
| react-example-link-mark-view | registry:block | An example showing how to render a mark as a custom component. | `npx shadcn@latest add https://prosekit.dev/r/react-example-link-mark-view.json` |
| react-example-list | registry:block | Example for list node. | `npx shadcn@latest add https://prosekit.dev/r/react-example-list.json` |
| react-example-list-custom-checkbox | registry:block | Custom checkbox styling for task lists. | `npx shadcn@latest add https://prosekit.dev/r/react-example-list-custom-checkbox.json` |
| react-example-loro | registry:block | Real-time collaboration using Loro CRDT library. | `npx shadcn@latest add https://prosekit.dev/r/react-example-loro.json` |
| react-example-mark-rule | registry:block | Input rules for automatic mark formatting. | `npx shadcn@latest add https://prosekit.dev/r/react-example-mark-rule.json` |
| react-example-minimal | registry:block | Minimal editor setup with basic functionality. | `npx shadcn@latest add https://prosekit.dev/r/react-example-minimal.json` |
| react-example-notion | registry:block | Notion-style editor with block-based editing. | `npx shadcn@latest add https://prosekit.dev/r/react-example-notion.json` |
| react-example-page | registry:block | Page layout with configurable paper settings. | `npx shadcn@latest add https://prosekit.dev/r/react-example-page.json` |
| react-example-placeholder | registry:block | Placeholder text displayed. | `npx shadcn@latest add https://prosekit.dev/r/react-example-placeholder.json` |
| react-example-readonly | registry:block | Toggle between read-only and editable mode. | `npx shadcn@latest add https://prosekit.dev/r/react-example-readonly.json` |
| react-example-rtl | registry:block | Right-to-left text direction support. | `npx shadcn@latest add https://prosekit.dev/r/react-example-rtl.json` |
| react-example-save-html | registry:block | Save and load documents as HTML format. | `npx shadcn@latest add https://prosekit.dev/r/react-example-save-html.json` |
| react-example-save-json | registry:block | Save and load documents as JSON format. | `npx shadcn@latest add https://prosekit.dev/r/react-example-save-json.json` |
| react-example-save-markdown | registry:block | Save and load documents as Markdown format. | `npx shadcn@latest add https://prosekit.dev/r/react-example-save-markdown.json` |
| react-example-search | registry:block | Search and highlight text with navigation. | `npx shadcn@latest add https://prosekit.dev/r/react-example-search.json` |
| react-example-slash-menu | registry:block | Command menu triggered by typing slash (/). | `npx shadcn@latest add https://prosekit.dev/r/react-example-slash-menu.json` |
| react-example-strike | registry:block | Example for strikethrough mark. | `npx shadcn@latest add https://prosekit.dev/r/react-example-strike.json` |
| react-example-sub-sup | registry:block | Example for subscript and superscript marks. | `npx shadcn@latest add https://prosekit.dev/r/react-example-sub-sup.json` |
| react-example-table | registry:block | Table node with row and column operations. | `npx shadcn@latest add https://prosekit.dev/r/react-example-table.json` |
| react-example-text-align | registry:block | Text alignment options (left, center, right, justify). | `npx shadcn@latest add https://prosekit.dev/r/react-example-text-align.json` |
| react-example-text-color | registry:block | Change text and background color. | `npx shadcn@latest add https://prosekit.dev/r/react-example-text-color.json` |
| react-example-toolbar | registry:block | Formatting toolbar with common editing actions. | `npx shadcn@latest add https://prosekit.dev/r/react-example-toolbar.json` |
| react-example-tweet | registry:block | Embed and display Twitter tweets. | `npx shadcn@latest add https://prosekit.dev/r/react-example-tweet.json` |
| react-example-typography | registry:block | Typography enhancements like smart quotes and dashes. | `npx shadcn@latest add https://prosekit.dev/r/react-example-typography.json` |
| react-example-underline | registry:block | Example for underline mark. | `npx shadcn@latest add https://prosekit.dev/r/react-example-underline.json` |
| react-example-unmount | registry:block | Properly unmount and remount editor instances. | `npx shadcn@latest add https://prosekit.dev/r/react-example-unmount.json` |
| react-example-user-menu | registry:block | Autocomplete menu for @mentions and #hashtag | `npx shadcn@latest add https://prosekit.dev/r/react-example-user-menu.json` |
| react-example-user-menu-dynamic | registry:block | Dynamic autocomplete menu with async data loading. | `npx shadcn@latest add https://prosekit.dev/r/react-example-user-menu-dynamic.json` |
| react-example-view-adapter | registry:block | Custom node and mark views using view adapters. | `npx shadcn@latest add https://prosekit.dev/r/react-example-view-adapter.json` |
| react-example-word-counter | registry:block | Display word and character count statistics. | `npx shadcn@latest add https://prosekit.dev/r/react-example-word-counter.json` |
| react-example-yjs | registry:block | Real-time collaboration using Yjs CRDT library. | `npx shadcn@latest add https://prosekit.dev/r/react-example-yjs.json` |
| react-sample-define-atom-block | registry:component | react-sample-define-atom-block | `npx shadcn@latest add https://prosekit.dev/r/react-sample-define-atom-block.json` |
| react-sample-katex | registry:component | react-sample-katex | `npx shadcn@latest add https://prosekit.dev/r/react-sample-katex.json` |
| react-sample-sample-doc-block-handle | registry:component | react-sample-sample-doc-block-handle | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-block-handle.json` |
| react-sample-sample-doc-bold | registry:component | react-sample-sample-doc-bold | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-bold.json` |
| react-sample-sample-doc-code | registry:component | react-sample-sample-doc-code | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-code.json` |
| react-sample-sample-doc-code-block | registry:component | react-sample-sample-doc-code-block | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-code-block.json` |
| react-sample-sample-doc-drop-cursor | registry:component | react-sample-sample-doc-drop-cursor | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-drop-cursor.json` |
| react-sample-sample-doc-font-family | registry:component | react-sample-sample-doc-font-family | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-font-family.json` |
| react-sample-sample-doc-full | registry:component | react-sample-sample-doc-full | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-full.json` |
| react-sample-sample-doc-gap-cursor | registry:component | react-sample-sample-doc-gap-cursor | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-gap-cursor.json` |
| react-sample-sample-doc-hard-break | registry:component | react-sample-sample-doc-hard-break | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-hard-break.json` |
| react-sample-sample-doc-heading | registry:component | react-sample-sample-doc-heading | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-heading.json` |
| react-sample-sample-doc-highlight | registry:component | react-sample-sample-doc-highlight | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-highlight.json` |
| react-sample-sample-doc-image | registry:component | react-sample-sample-doc-image | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-image.json` |
| react-sample-sample-doc-inline-menu | registry:component | react-sample-sample-doc-inline-menu | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-inline-menu.json` |
| react-sample-sample-doc-italic | registry:component | react-sample-sample-doc-italic | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-italic.json` |
| react-sample-sample-doc-link | registry:component | react-sample-sample-doc-link | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-link.json` |
| react-sample-sample-doc-link-mark-view | registry:component | react-sample-sample-doc-link-mark-view | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-link-mark-view.json` |
| react-sample-sample-doc-list | registry:component | react-sample-sample-doc-list | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-list.json` |
| react-sample-sample-doc-list-custom-checkbox | registry:component | react-sample-sample-doc-list-custom-checkbox | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-list-custom-checkbox.json` |
| react-sample-sample-doc-notion | registry:component | react-sample-sample-doc-notion | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-notion.json` |
| react-sample-sample-doc-page | registry:component | react-sample-sample-doc-page | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-page.json` |
| react-sample-sample-doc-readonly | registry:component | react-sample-sample-doc-readonly | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-readonly.json` |
| react-sample-sample-doc-rtl | registry:component | react-sample-sample-doc-rtl | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-rtl.json` |
| react-sample-sample-doc-search | registry:component | react-sample-sample-doc-search | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-search.json` |
| react-sample-sample-doc-strike | registry:component | react-sample-sample-doc-strike | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-strike.json` |
| react-sample-sample-doc-sub-sup | registry:component | react-sample-sample-doc-sub-sup | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-sub-sup.json` |
| react-sample-sample-doc-table | registry:component | react-sample-sample-doc-table | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-table.json` |
| react-sample-sample-doc-tex | registry:component | react-sample-sample-doc-tex | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-tex.json` |
| react-sample-sample-doc-text-align | registry:component | react-sample-sample-doc-text-align | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-text-align.json` |
| react-sample-sample-doc-text-color | registry:component | react-sample-sample-doc-text-color | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-text-color.json` |
| react-sample-sample-doc-tweet | registry:component | react-sample-sample-doc-tweet | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-tweet.json` |
| react-sample-sample-doc-typography | registry:component | react-sample-sample-doc-typography | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-typography.json` |
| react-sample-sample-doc-underline | registry:component | react-sample-sample-doc-underline | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-underline.json` |
| react-sample-sample-doc-view-adapter | registry:component | react-sample-sample-doc-view-adapter | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-view-adapter.json` |
| react-sample-sample-doc-word-counter | registry:component | react-sample-sample-doc-word-counter | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-doc-word-counter.json` |
| react-sample-sample-query-users | registry:component | react-sample-sample-query-users | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-query-users.json` |
| react-sample-sample-tag-data | registry:component | react-sample-sample-tag-data | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-tag-data.json` |
| react-sample-sample-uploader | registry:component | react-sample-sample-uploader | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-uploader.json` |
| react-sample-sample-user-data | registry:component | react-sample-sample-user-data | `npx shadcn@latest add https://prosekit.dev/r/react-sample-sample-user-data.json` |
| react-ui-block-handle | registry:component | react-ui-block-handle | `npx shadcn@latest add https://prosekit.dev/r/react-ui-block-handle.json` |
| react-ui-button | registry:component | react-ui-button | `npx shadcn@latest add https://prosekit.dev/r/react-ui-button.json` |
| react-ui-code-block-view | registry:component | react-ui-code-block-view | `npx shadcn@latest add https://prosekit.dev/r/react-ui-code-block-view.json` |
| react-ui-drop-indicator | registry:component | react-ui-drop-indicator | `npx shadcn@latest add https://prosekit.dev/r/react-ui-drop-indicator.json` |
| react-ui-image-upload-popover | registry:component | react-ui-image-upload-popover | `npx shadcn@latest add https://prosekit.dev/r/react-ui-image-upload-popover.json` |
| react-ui-image-view | registry:component | react-ui-image-view | `npx shadcn@latest add https://prosekit.dev/r/react-ui-image-view.json` |
| react-ui-inline-menu | registry:component | react-ui-inline-menu | `npx shadcn@latest add https://prosekit.dev/r/react-ui-inline-menu.json` |
| react-ui-search | registry:component | react-ui-search | `npx shadcn@latest add https://prosekit.dev/r/react-ui-search.json` |
| react-ui-slash-menu | registry:component | react-ui-slash-menu | `npx shadcn@latest add https://prosekit.dev/r/react-ui-slash-menu.json` |
| react-ui-table-handle | registry:component | react-ui-table-handle | `npx shadcn@latest add https://prosekit.dev/r/react-ui-table-handle.json` |
| react-ui-tag-menu | registry:component | react-ui-tag-menu | `npx shadcn@latest add https://prosekit.dev/r/react-ui-tag-menu.json` |
| react-ui-toolbar | registry:component | react-ui-toolbar | `npx shadcn@latest add https://prosekit.dev/r/react-ui-toolbar.json` |
| react-ui-user-menu | registry:component | react-ui-user-menu | `npx shadcn@latest add https://prosekit.dev/r/react-ui-user-menu.json` |
| react-ui-word-counter | registry:component | react-ui-word-counter | `npx shadcn@latest add https://prosekit.dev/r/react-ui-word-counter.json` |
| preact-example-block-handle | registry:block | A handle that appears on hover, allowing you to drag and re-order blocks. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-block-handle.json` |
| preact-example-blockquote | registry:block | Example for blockquote node. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-blockquote.json` |
| preact-example-bold | registry:block | Example for bold mark. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-bold.json` |
| preact-example-change-tracking | registry:block | Track and commit document changes with version history. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-change-tracking.json` |
| preact-example-code | registry:block | Example for inline code mark. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-code.json` |
| preact-example-code-block | registry:block | Code block with syntax highlighting and a Mermaid diagram preview. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-code-block.json` |
| preact-example-code-block-themes | registry:block | Code block with multiple syntax highlighting themes. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-code-block-themes.json` |
| preact-example-drop-cursor | registry:block | Visual cursor indicator during drag-and-drop operations. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-drop-cursor.json` |
| preact-example-emoji-rules | registry:block | Auto-convert text shortcuts to emojis using input rules. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-emoji-rules.json` |
| preact-example-font-family | registry:block | Change the font family of text. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-font-family.json` |
| preact-example-full | registry:block | Full-featured editor with most available features enabled. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-full.json` |
| preact-example-gap-cursor | registry:block | Cursor navigation between non-text block elements. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-gap-cursor.json` |
| preact-example-hard-break | registry:block | Example for hard line break node. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-hard-break.json` |
| preact-example-heading | registry:block | Example for heading node with multiple levels. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-heading.json` |
| preact-example-highlight | registry:block | Example for highlighting text (like a highlighter pen). | `npx shadcn@latest add https://prosekit.dev/r/preact-example-highlight.json` |
| preact-example-horizontal-rule | registry:block | Example for horizontal rule node. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-horizontal-rule.json` |
| preact-example-image-view | registry:block | Custom image node views with resize support. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-image-view.json` |
| preact-example-inline-menu | registry:block | Inline formatting menu that appears on text selection. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-inline-menu.json` |
| preact-example-italic | registry:block | Example for italic mark. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-italic.json` |
| preact-example-katex | registry:block | Math equation rendering using the KaTeX library. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-katex.json` |
| preact-example-keymap | registry:block | Custom keyboard shortcuts and key bindings. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-keymap.json` |
| preact-example-link | registry:block | Example for link mark with URL input. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-link.json` |
| preact-example-link-mark-view | registry:block | An example showing how to render a mark as a custom component. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-link-mark-view.json` |
| preact-example-list | registry:block | Example for list node. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-list.json` |
| preact-example-list-custom-checkbox | registry:block | Custom checkbox styling for task lists. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-list-custom-checkbox.json` |
| preact-example-loro | registry:block | Real-time collaboration using Loro CRDT library. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-loro.json` |
| preact-example-mark-rule | registry:block | Input rules for automatic mark formatting. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-mark-rule.json` |
| preact-example-minimal | registry:block | Minimal editor setup with basic functionality. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-minimal.json` |
| preact-example-placeholder | registry:block | Placeholder text displayed. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-placeholder.json` |
| preact-example-readonly | registry:block | Toggle between read-only and editable mode. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-readonly.json` |
| preact-example-rtl | registry:block | Right-to-left text direction support. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-rtl.json` |
| preact-example-save-html | registry:block | Save and load documents as HTML format. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-save-html.json` |
| preact-example-save-json | registry:block | Save and load documents as JSON format. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-save-json.json` |
| preact-example-save-markdown | registry:block | Save and load documents as Markdown format. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-save-markdown.json` |
| preact-example-search | registry:block | Search and highlight text with navigation. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-search.json` |
| preact-example-slash-menu | registry:block | Command menu triggered by typing slash (/). | `npx shadcn@latest add https://prosekit.dev/r/preact-example-slash-menu.json` |
| preact-example-strike | registry:block | Example for strikethrough mark. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-strike.json` |
| preact-example-sub-sup | registry:block | Example for subscript and superscript marks. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-sub-sup.json` |
| preact-example-table | registry:block | Table node with row and column operations. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-table.json` |
| preact-example-text-align | registry:block | Text alignment options (left, center, right, justify). | `npx shadcn@latest add https://prosekit.dev/r/preact-example-text-align.json` |
| preact-example-text-color | registry:block | Change text and background color. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-text-color.json` |
| preact-example-toolbar | registry:block | Formatting toolbar with common editing actions. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-toolbar.json` |
| preact-example-typography | registry:block | Typography enhancements like smart quotes and dashes. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-typography.json` |
| preact-example-underline | registry:block | Example for underline mark. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-underline.json` |
| preact-example-unmount | registry:block | Properly unmount and remount editor instances. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-unmount.json` |
| preact-example-user-menu | registry:block | Autocomplete menu for @mentions and #hashtag | `npx shadcn@latest add https://prosekit.dev/r/preact-example-user-menu.json` |
| preact-example-user-menu-dynamic | registry:block | Dynamic autocomplete menu with async data loading. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-user-menu-dynamic.json` |
| preact-example-view-adapter | registry:block | Custom node and mark views using view adapters. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-view-adapter.json` |
| preact-example-word-counter | registry:block | Display word and character count statistics. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-word-counter.json` |
| preact-example-yjs | registry:block | Real-time collaboration using Yjs CRDT library. | `npx shadcn@latest add https://prosekit.dev/r/preact-example-yjs.json` |
| preact-sample-define-atom-block | registry:component | preact-sample-define-atom-block | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-define-atom-block.json` |
| preact-sample-katex | registry:component | preact-sample-katex | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-katex.json` |
| preact-sample-sample-doc-block-handle | registry:component | preact-sample-sample-doc-block-handle | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-block-handle.json` |
| preact-sample-sample-doc-bold | registry:component | preact-sample-sample-doc-bold | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-bold.json` |
| preact-sample-sample-doc-code | registry:component | preact-sample-sample-doc-code | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-code.json` |
| preact-sample-sample-doc-code-block | registry:component | preact-sample-sample-doc-code-block | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-code-block.json` |
| preact-sample-sample-doc-drop-cursor | registry:component | preact-sample-sample-doc-drop-cursor | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-drop-cursor.json` |
| preact-sample-sample-doc-font-family | registry:component | preact-sample-sample-doc-font-family | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-font-family.json` |
| preact-sample-sample-doc-full | registry:component | preact-sample-sample-doc-full | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-full.json` |
| preact-sample-sample-doc-gap-cursor | registry:component | preact-sample-sample-doc-gap-cursor | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-gap-cursor.json` |
| preact-sample-sample-doc-hard-break | registry:component | preact-sample-sample-doc-hard-break | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-hard-break.json` |
| preact-sample-sample-doc-heading | registry:component | preact-sample-sample-doc-heading | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-heading.json` |
| preact-sample-sample-doc-highlight | registry:component | preact-sample-sample-doc-highlight | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-highlight.json` |
| preact-sample-sample-doc-image | registry:component | preact-sample-sample-doc-image | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-image.json` |
| preact-sample-sample-doc-inline-menu | registry:component | preact-sample-sample-doc-inline-menu | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-inline-menu.json` |
| preact-sample-sample-doc-italic | registry:component | preact-sample-sample-doc-italic | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-italic.json` |
| preact-sample-sample-doc-link | registry:component | preact-sample-sample-doc-link | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-link.json` |
| preact-sample-sample-doc-link-mark-view | registry:component | preact-sample-sample-doc-link-mark-view | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-link-mark-view.json` |
| preact-sample-sample-doc-list | registry:component | preact-sample-sample-doc-list | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-list.json` |
| preact-sample-sample-doc-list-custom-checkbox | registry:component | preact-sample-sample-doc-list-custom-checkbox | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-list-custom-checkbox.json` |
| preact-sample-sample-doc-readonly | registry:component | preact-sample-sample-doc-readonly | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-readonly.json` |
| preact-sample-sample-doc-rtl | registry:component | preact-sample-sample-doc-rtl | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-rtl.json` |
| preact-sample-sample-doc-search | registry:component | preact-sample-sample-doc-search | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-search.json` |
| preact-sample-sample-doc-strike | registry:component | preact-sample-sample-doc-strike | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-strike.json` |
| preact-sample-sample-doc-sub-sup | registry:component | preact-sample-sample-doc-sub-sup | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-sub-sup.json` |
| preact-sample-sample-doc-table | registry:component | preact-sample-sample-doc-table | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-table.json` |
| preact-sample-sample-doc-tex | registry:component | preact-sample-sample-doc-tex | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-tex.json` |
| preact-sample-sample-doc-text-align | registry:component | preact-sample-sample-doc-text-align | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-text-align.json` |
| preact-sample-sample-doc-text-color | registry:component | preact-sample-sample-doc-text-color | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-text-color.json` |
| preact-sample-sample-doc-typography | registry:component | preact-sample-sample-doc-typography | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-typography.json` |
| preact-sample-sample-doc-underline | registry:component | preact-sample-sample-doc-underline | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-underline.json` |
| preact-sample-sample-doc-view-adapter | registry:component | preact-sample-sample-doc-view-adapter | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-view-adapter.json` |
| preact-sample-sample-doc-word-counter | registry:component | preact-sample-sample-doc-word-counter | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-doc-word-counter.json` |
| preact-sample-sample-query-users | registry:component | preact-sample-sample-query-users | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-query-users.json` |
| preact-sample-sample-tag-data | registry:component | preact-sample-sample-tag-data | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-tag-data.json` |
| preact-sample-sample-uploader | registry:component | preact-sample-sample-uploader | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-uploader.json` |
| preact-sample-sample-user-data | registry:component | preact-sample-sample-user-data | `npx shadcn@latest add https://prosekit.dev/r/preact-sample-sample-user-data.json` |
| preact-ui-block-handle | registry:component | preact-ui-block-handle | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-block-handle.json` |
| preact-ui-button | registry:component | preact-ui-button | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-button.json` |
| preact-ui-code-block-view | registry:component | preact-ui-code-block-view | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-code-block-view.json` |
| preact-ui-drop-indicator | registry:component | preact-ui-drop-indicator | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-drop-indicator.json` |
| preact-ui-image-upload-popover | registry:component | preact-ui-image-upload-popover | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-image-upload-popover.json` |
| preact-ui-image-view | registry:component | preact-ui-image-view | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-image-view.json` |
| preact-ui-inline-menu | registry:component | preact-ui-inline-menu | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-inline-menu.json` |
| preact-ui-search | registry:component | preact-ui-search | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-search.json` |
| preact-ui-slash-menu | registry:component | preact-ui-slash-menu | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-slash-menu.json` |
| preact-ui-table-handle | registry:component | preact-ui-table-handle | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-table-handle.json` |
| preact-ui-tag-menu | registry:component | preact-ui-tag-menu | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-tag-menu.json` |
| preact-ui-toolbar | registry:component | preact-ui-toolbar | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-toolbar.json` |
| preact-ui-user-menu | registry:component | preact-ui-user-menu | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-user-menu.json` |
| preact-ui-word-counter | registry:component | preact-ui-word-counter | `npx shadcn@latest add https://prosekit.dev/r/preact-ui-word-counter.json` |
| vue-example-block-handle | registry:block | A handle that appears on hover, allowing you to drag and re-order blocks. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-block-handle.json` |
| vue-example-blockquote | registry:block | Example for blockquote node. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-blockquote.json` |
| vue-example-bold | registry:block | Example for bold mark. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-bold.json` |
| vue-example-change-tracking | registry:block | Track and commit document changes with version history. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-change-tracking.json` |
| vue-example-code | registry:block | Example for inline code mark. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-code.json` |
| vue-example-code-block | registry:block | Code block with syntax highlighting and a Mermaid diagram preview. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-code-block.json` |
| vue-example-code-block-themes | registry:block | Code block with multiple syntax highlighting themes. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-code-block-themes.json` |
| vue-example-drop-cursor | registry:block | Visual cursor indicator during drag-and-drop operations. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-drop-cursor.json` |
| vue-example-emoji-rules | registry:block | Auto-convert text shortcuts to emojis using input rules. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-emoji-rules.json` |
| vue-example-font-family | registry:block | Change the font family of text. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-font-family.json` |
| vue-example-full | registry:block | Full-featured editor with most available features enabled. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-full.json` |
| vue-example-gap-cursor | registry:block | Cursor navigation between non-text block elements. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-gap-cursor.json` |
| vue-example-hard-break | registry:block | Example for hard line break node. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-hard-break.json` |
| vue-example-heading | registry:block | Example for heading node with multiple levels. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-heading.json` |
| vue-example-highlight | registry:block | Example for highlighting text (like a highlighter pen). | `npx shadcn@latest add https://prosekit.dev/r/vue-example-highlight.json` |
| vue-example-horizontal-rule | registry:block | Example for horizontal rule node. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-horizontal-rule.json` |
| vue-example-image-view | registry:block | Custom image node views with resize support. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-image-view.json` |
| vue-example-inline-menu | registry:block | Inline formatting menu that appears on text selection. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-inline-menu.json` |
| vue-example-italic | registry:block | Example for italic mark. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-italic.json` |
| vue-example-katex | registry:block | Math equation rendering using the KaTeX library. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-katex.json` |
| vue-example-keymap | registry:block | Custom keyboard shortcuts and key bindings. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-keymap.json` |
| vue-example-link | registry:block | Example for link mark with URL input. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-link.json` |
| vue-example-link-mark-view | registry:block | An example showing how to render a mark as a custom component. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-link-mark-view.json` |
| vue-example-list | registry:block | Example for list node. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-list.json` |
| vue-example-list-custom-checkbox | registry:block | Custom checkbox styling for task lists. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-list-custom-checkbox.json` |
| vue-example-loro | registry:block | Real-time collaboration using Loro CRDT library. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-loro.json` |
| vue-example-mark-rule | registry:block | Input rules for automatic mark formatting. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-mark-rule.json` |
| vue-example-minimal | registry:block | Minimal editor setup with basic functionality. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-minimal.json` |
| vue-example-placeholder | registry:block | Placeholder text displayed. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-placeholder.json` |
| vue-example-readonly | registry:block | Toggle between read-only and editable mode. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-readonly.json` |
| vue-example-rtl | registry:block | Right-to-left text direction support. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-rtl.json` |
| vue-example-save-html | registry:block | Save and load documents as HTML format. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-save-html.json` |
| vue-example-save-json | registry:block | Save and load documents as JSON format. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-save-json.json` |
| vue-example-save-markdown | registry:block | Save and load documents as Markdown format. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-save-markdown.json` |
| vue-example-search | registry:block | Search and highlight text with navigation. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-search.json` |
| vue-example-slash-menu | registry:block | Command menu triggered by typing slash (/). | `npx shadcn@latest add https://prosekit.dev/r/vue-example-slash-menu.json` |
| vue-example-strike | registry:block | Example for strikethrough mark. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-strike.json` |
| vue-example-sub-sup | registry:block | Example for subscript and superscript marks. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-sub-sup.json` |
| vue-example-table | registry:block | Table node with row and column operations. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-table.json` |
| vue-example-text-align | registry:block | Text alignment options (left, center, right, justify). | `npx shadcn@latest add https://prosekit.dev/r/vue-example-text-align.json` |
| vue-example-text-color | registry:block | Change text and background color. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-text-color.json` |
| vue-example-toolbar | registry:block | Formatting toolbar with common editing actions. | `npx shadcn@latest add https://prosekit.dev/r/vue-example-toolbar.json` |

## For AI agents

```text
You are adding components from @prosekit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/prosekit.md) for the component list.
2. Fetch the machine-readable index: https://prosekit.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: prosekit).
```