# Docs Editor Shell

Product documentation space (PRD) with a section outline and word goal tracking.

- id: `docs-editor-shell`
- Page: https://agentic-ui-kit.com/components/docs-editor-shell
- Live preview: https://agentic-ui-kit.com/live/component/docs-editor-shell

## Install

```bash
agentic-ui add docs-editor-shell
npx shadcn@4.17.0 add @agentic-ui/docs-editor-shell
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rich-text-editing, formatting-toolbar, document-outline, heading-navigation, word-count-telemetry, reading-time-estimation, target-word-goal, template-switching, multi-format-export, read-only-mode, zen-focus-mode, dark-mode
- **Intents:** create-edit, generate-content, configure, navigate
- **Suits domains:** knowledge, notes, project-management, ai-workspace, saas
- **Interaction:** edit-rich-text, toggle-formatting, jump-to-heading, filter-outline, switch-template, export-document, toggle-zen-mode, keyboard-shortcuts
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Product documentation space (PRD) with a section outline and word goal tracking, Engineering technical proposals and RFCs with heading navigation and Markdown export, Meeting minutes and sprint notes editor with checkable task lists and reading indicators, Knowledge base hub where articles are drafted with a clear structure before publishing
- **Avoid when:** Short single-line text fields or simple transactional forms, Environments that require pure source code editing with specialized syntax highlighting (use Monaco/CodeMirror), Spreadsheets or complex tabular matrices with formulas
- **Preserve when adapting:** tiptap-schema-contract, outline-extraction-logic, metrics-calculation-contract, keyboard-accessibility-model
- **Replace when adapting:** document-templates, custom-marks-extensions, export-handlers, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, input
- **npm dependencies:** @tiptap/react, @tiptap/starter-kit, @tiptap/extension-placeholder, @tiptap/extension-task-list, @tiptap/extension-task-item, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** @tiptap/extension-placeholder@^3.24.0, @tiptap/extension-task-item@^3.24.0, @tiptap/extension-task-list@^3.24.0, @tiptap/react@^3.24.0, @tiptap/starter-kit@^3.24.0, lucide-react@0.577.0