Docscn

Overview

docscn is a shadcn/ui registry of documentation components for Next.js, built on Fumadocs Core as a drop-in replacement for Fumadocs UI. It keeps the same component names, props and module paths as Fumadocs UI, so migrating means swapping the import prefix, and the components install into components/docs as editable source.

Because it is built on the project's own shadcn sidebar, tabs and dialogs and styled with its theme tokens, docs match the rest of the app. One command, npx shadcn@latest add @docscn/docs, adds the components, routes, search and a first page. Data comes from Fumadocs Core, so any content source Fumadocs supports works. The project is in early release.

Features

• Layouts: Docs, notebook and home layouts on the shadcn/ui sidebar, with page tree, tabs and a mobile menu.
• Search: A Cmd+K dialog for Fumadocs' search server with tag filters and keyboard navigation.
• Navigation: A table of contents that tracks headings in view, breadcrumbs and previous and next links.
• Code blocks: Shiki output from Fumadocs MDX with titles, icons, tabs and copy buttons in light and dark.
• MDX components: Callouts, cards, tabs, steps, accordions, file trees, type tables and image zoom.
• AI chat: An Ask AI dialog that answers questions from the docs, with an OpenRouter variant.
• Agent ready: Copy a page as Markdown or open it in ChatGPT, Claude or Cursor.
• Internationalization: Fumadocs UI language packs work, plus a language switcher.

Tech stack

• Next.js, shadcn/ui
• Fumadocs Core 16
• Shiki, Vercel AI SDK

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @docscn/component-name