{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-kits-docs",
  "title": "Feature Kits",
  "description": "Use registry kits to add groups of Plate plugins and UI wiring.",
  "files": [
    {
      "path": "../../content/docs/(guides)/feature-kits.mdx",
      "content": "---\ntitle: Feature Kits\ndescription: Use registry kits to add groups of Plate plugins and UI wiring.\n---\n\nFeature kits are app-owned registry files that group related Plate plugins, components, shortcuts, input rules, and helper UI.\nUse them to start from working Plate UI wiring, then edit the installed kit when your app needs different behavior.\n\n## Kit Types\n\n| Kit type | Example | Use for |\n| --- | --- | --- |\n| Client/UI kit | `basic-nodes-kit`, `table-kit`, `media-kit` | Editable React editors with Plate UI components. |\n| Base kit | `basic-blocks-base-kit`, `table-base-kit` | Static rendering and server-safe editor setup. |\n| Full editor kit | `editor-kit` | A complete client editor feature stack. |\n| Full base kit | `editor-base-kit` | A broad static/base plugin stack. |\n\nFeature kits live under `components/editor/plugins` after installation. Full\neditor kits like `editor-kit` and `editor-base-kit` live under\n`components/editor`. They are normal TypeScript files in your app, not package\nexports locked inside `node_modules`.\n\n## Use a Kit\n\nInstall the kit through the Plate registry, then import it from your app.\n\n```tsx title=\"components/editor.tsx\" showLineNumbers\nimport { Plate, usePlateEditor } from 'platejs/react';\n\nimport { BasicNodesKit } from '@/components/editor/plugins/basic-nodes-kit';\nimport { TableKit } from '@/components/editor/plugins/table-kit';\nimport { Editor, EditorContainer } from '@/components/ui/editor';\n\nexport function MyEditor() {\n  const editor = usePlateEditor({\n    plugins: [...BasicNodesKit, ...TableKit],\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer>\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n```\n\n`BasicNodesKit` composes `BasicBlocksKit` and `BasicMarksKit`. For example,\n`BasicBlocksKit` wires paragraph, headings, blockquote, and horizontal rule\nplugins to their Plate UI components; `BasicMarksKit` wires marks, input rules,\nshortcuts, and mark leaf components.\n\n## Choose the Right Kit\n\n| Need | Start with |\n| --- | --- |\n| Paragraphs, headings, blockquotes, marks. | `basic-nodes-kit` |\n| Tables with table UI components. | `table-kit` |\n| Images, video, audio, files, embeds, captions. | `media-kit` |\n| Comments and discussions. | `comment-kit` plus `discussion-kit` |\n| AI menu, AI nodes, cursor overlay, and Markdown support. | `ai-kit` |\n| Full editable editor stack. | `editor-kit` |\n| Static or server-rendered output. | `editor-base-kit` or focused `*-base-kit` files |\n\nPlugin pages show the recommended kit in their installation section. Use the kit\nsource when you need the exact plugin list, imported UI components, shortcuts,\nor registry dependencies.\n\n## Base Kits\n\nBase kits use base plugins and static components. They are the right starting\npoint for [Static Rendering](/docs/static), [Node.js](/docs/installation/node),\nand other non-editable pipelines.\n\n```ts title=\"static-editor.ts\"\nimport { BaseEditorKit } from '@/components/editor/editor-base-kit';\nimport { createStaticEditor } from 'platejs/static';\n\nconst editor = createStaticEditor({\n  plugins: BaseEditorKit,\n});\n```\n\nUse client kits in editable React editors. Use base kits when React editor hooks,\neditable components, floating UI, or browser-only behavior should stay out of\nthe runtime.\n\n## Customize a Kit\n\nBecause kits are copied into your app, the cleanest customization is usually to\nedit the installed kit file.\n\n```tsx title=\"components/editor/plugins/my-basic-kit.tsx\"\nimport { H1Plugin } from '@platejs/basic-nodes/react';\nimport { ParagraphPlugin } from 'platejs/react';\n\nimport { H1Element } from '@/components/ui/heading-node';\nimport { ParagraphElement } from '@/components/ui/paragraph-node';\n\nexport const MyBasicKit = [\n  ParagraphPlugin.withComponent(ParagraphElement),\n  H1Plugin.configure({\n    node: {\n      component: H1Element,\n    },\n    shortcuts: {\n      toggle: { keys: 'mod+alt+1' },\n    },\n  }),\n];\n```\n\nUse manual plugin setup when you only need a small part of a kit, when the app\ndoes not use Plate UI components, or when a feature needs a different dependency\nboundary.\n\n## Registry Names\n\nKits are registry items. These names map to files in\n`components/editor/plugins` or `components/editor`.\n\n| Registry item | Installs |\n| --- | --- |\n| `basic-nodes-kit` | `BasicNodesKit`, `BasicBlocksKit`, and `BasicMarksKit` dependencies. |\n| `table-kit` | `TableKit` and table UI components. |\n| `media-kit` | `MediaKit` without a media upload API route. |\n| `media-uploadthing-kit` | `media-kit` plus the UploadThing API route. |\n| `editor-kit` | The full editable editor kit. |\n| `editor-base-kit` | The full static/base kit. |\n\n## Next Steps\n\n| Task | Guide |\n| --- | --- |\n| Install registry items. | [Plate UI](/docs/installation/plate-ui) |\n| Configure editor creation. | [Editor Configuration](/docs/editor) |\n| Compose plugin APIs and options. | [Plugin Methods](/docs/plugin-methods) |\n| Render without an editable React editor. | [Static Rendering](/docs/static) |\n",
      "type": "registry:file",
      "target": "content/docs/plate/(guides)/feature-kits.mdx"
    }
  ],
  "type": "registry:file"
}