---
name: "@docscn"
slug: "docscn"
description: "Documentation components built on Fumadocs Core: docs layouts, sidebars, tables of contents, search and MDX components. A drop-in replacement for Fumadocs UI."
category: "Charts/data viz"
tags: ["ai", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "forms", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "ruiyuwg"
website: "https://docscn.dev"
github: "https://github.com/ruiyuwg/docscn"
registry: "https://docscn.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 43
generated_at: "2026-10-10T06:32:55.998Z"
---

# @docscn

Documentation components built on Fumadocs Core: docs layouts, sidebars, tables of contents, search and MDX components. A drop-in replacement for Fumadocs UI.

## Links

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

## Install

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

## Components (43)

| name | type | description | install |
| --- | --- | --- | --- |
| docs-utils | registry:lib | Shared helpers used by docscn components: URL matching, ref merging, hotkeys, copy-button state and tab groups that share a selection. | `npx shadcn@latest add https://docscn.dev/r/docs-utils.json` |
| search-context | registry:component | SearchProvider and useSearchContext: the search dialog's open state, its Meta/Ctrl+K hotkey and shared dialog types. | `npx shadcn@latest add https://docscn.dev/r/search-context.json` |
| i18n-context | registry:component | I18nProvider and useI18n: the current locale, the available locales and the UI string translations, which RootProvider's i18n prop sets. | `npx shadcn@latest add https://docscn.dev/r/i18n-context.json` |
| i18n | registry:lib | defineI18nUI, i18nProvider and uiTranslations: build RootProvider's i18n prop from a Fumadocs Core i18n config, with translations of the UI strings keyed as in… | `npx shadcn@latest add https://docscn.dev/r/i18n.json` |
| root-provider | registry:component | RootProvider for the root layout: theme (next-themes) with a `d` hotkey, the default search dialog, tooltips, text direction and Next.js framework adapters. | `npx shadcn@latest add https://docscn.dev/r/root-provider.json` |
| theme-switch | registry:component | ThemeSwitch: a light/dark toggle, or a light/dark/system toggle group. | `npx shadcn@latest add https://docscn.dev/r/theme-switch.json` |
| search-trigger | registry:component | SearchTrigger (icon button) and FullSearchTrigger (search field with hotkey hint) that open the search dialog. | `npx shadcn@latest add https://docscn.dev/r/search-trigger.json` |
| language-select | registry:component | LanguageSelect and LanguageSelectText: a popover listing the locales from RootProvider's i18n prop, shown by the layouts when there is more than one. | `npx shadcn@latest add https://docscn.dev/r/language-select.json` |
| layout-shared | registry:component | BaseLayoutProps, link items, layout tabs, the AI chat panel and helpers shared by the docs, notebook and home layouts. | `npx shadcn@latest add https://docscn.dev/r/layout-shared.json` |
| typography | registry:item | The docs-typeset class for MDX content, built from your shadcn/ui theme tokens. Add not-docs-typeset to opt an element out. | `npx shadcn@latest add https://docscn.dev/r/typography.json` |
| heading | registry:component | Heading with an anchor link and a button that copies the link to the section. | `npx shadcn@latest add https://docscn.dev/r/heading.json` |
| codeblock | registry:component | CodeBlock and CodeBlockTabs for Fumadocs MDX's Shiki output: title, icon, copy button, code tabs, and the styles for dual themes, highlights, diffs, focus and … | `npx shadcn@latest add https://docscn.dev/r/codeblock.json` |
| card | registry:component | Cards and Card: a grid of link cards with an icon, title and description. | `npx shadcn@latest add https://docscn.dev/r/card.json` |
| callout | registry:component | Callout for notes and warnings, with info, warning, error, success and idea types. | `npx shadcn@latest add https://docscn.dev/r/callout.json` |
| mdx | registry:component | defaultMdxComponents for Fumadocs MDX content (code blocks, headings, links, images, tables, cards and callouts) and createRelativeLink. | `npx shadcn@latest add https://docscn.dev/r/mdx.json` |
| tree-context | registry:component | TreeContextProvider and hooks for the current page tree, the path to the current page, layout tab groups and the linear page list used for previous/next links. | `npx shadcn@latest add https://docscn.dev/r/tree-context.json` |
| docs-sidebar | registry:component | SidebarPageTree renders a Fumadocs page tree (pages, folders, separators, icons, external links) with the shadcn/ui sidebar menu, and SidebarLinkItem renders l… | `npx shadcn@latest add https://docscn.dev/r/docs-sidebar.json` |
| sidebar-tabs | registry:component | getSidebarTabs and SidebarTabsDropdown: switch between root folders of the page tree from a dropdown in the sidebar. | `npx shadcn@latest add https://docscn.dev/r/sidebar-tabs.json` |
| docs-layout | registry:component | DocsLayout: the docs layout on the shadcn/ui sidebar, with the page tree, search, layout tabs, links, a theme switch and a mobile navbar. | `npx shadcn@latest add https://docscn.dev/r/docs-layout.json` |
| toc | registry:component | TOCProvider, TOCScrollArea and the TOC items in three styles: the default, with a thumb that follows the headings in view, clerk and block. | `npx shadcn@latest add https://docscn.dev/r/toc.json` |
| page-actions | registry:component | MarkdownCopyButton copies the page as Markdown, and ViewOptionsPopover links to the source on GitHub, the Markdown, and ChatGPT, Claude, Cursor and Scira. | `npx shadcn@latest add https://docscn.dev/r/page-actions.json` |
| docs-page | registry:component | DocsPage, DocsTitle, DocsDescription and DocsBody, with the breadcrumb, previous/next links, the table of contents (a popover on small screens), EditOnGitHub a… | `npx shadcn@latest add https://docscn.dev/r/docs-page.json` |
| notebook-layout | registry:component | DocsLayout from layouts/notebook: a more compact docs layout on the shadcn/ui sidebar, with a navbar beside or above the sidebar, and layout tabs in the sideba… | `npx shadcn@latest add https://docscn.dev/r/notebook-layout.json` |
| notebook-page | registry:component | DocsPage and the other page components from layouts/notebook/page, for pages in the notebook layout: the breadcrumb, previous/next links, the table of contents… | `npx shadcn@latest add https://docscn.dev/r/notebook-page.json` |
| search-dialog | registry:component | The search dialog's parts (SearchDialog, SearchDialogContent, SearchDialogInput, SearchDialogList, TagsList, ...) for building a search dialog for any Fumadocs… | `npx shadcn@latest add https://docscn.dev/r/search-dialog.json` |
| search-dialog-default | registry:component | DefaultSearchDialog: the search dialog for Fumadocs' built-in search server (createFromSource), with tag filters and default links. RootProvider loads it by de… | `npx shadcn@latest add https://docscn.dev/r/search-dialog-default.json` |
| home-layout | registry:component | HomeLayout: a layout for landing pages with a navbar (links, navigation menus, search, theme switch) and a mobile menu, plus DefaultNotFound for 404 pages. | `npx shadcn@latest add https://docscn.dev/r/home-layout.json` |
| og | registry:component | generateOGImage: a default Open Graph image for docs pages, rendered with next/og. | `npx shadcn@latest add https://docscn.dev/r/og.json` |
| docs-tabs | registry:component | Tabs and Tab for MDX content: tabs from a list of items or with explicit values, with selections shared between tab groups, persisted, or linked from the URL h… | `npx shadcn@latest add https://docscn.dev/r/docs-tabs.json` |
| steps | registry:component | Steps and Step: numbered steps on a line, plus the styles for the fd-steps and fd-step classes that remark-steps adds. | `npx shadcn@latest add https://docscn.dev/r/steps.json` |
| docs-accordion | registry:component | Accordions and Accordion: collapsible sections that open from the URL hash and have a copy-link button. | `npx shadcn@latest add https://docscn.dev/r/docs-accordion.json` |
| files | registry:component | Files, Folder and File: a file tree with collapsible folders, also rendered from remark-mdx-files output. | `npx shadcn@latest add https://docscn.dev/r/files.json` |
| type-table | registry:component | TypeTable: a table of props or fields, each expanding to its description, full type, default, parameters and return value, and linkable from the URL hash. | `npx shadcn@latest add https://docscn.dev/r/type-table.json` |
| image-zoom | registry:component | ImageZoom: an image that zooms in to fill the screen when clicked, built on react-medium-image-zoom. | `npx shadcn@latest add https://docscn.dev/r/image-zoom.json` |
| inline-toc | registry:component | InlineTOC: a collapsible table of contents to place inside a page. | `npx shadcn@latest add https://docscn.dev/r/inline-toc.json` |
| banner | registry:component | Banner: an announcement bar above the layout, optionally dismissible and with a rainbow variant, that offsets docscn's layouts by its height. | `npx shadcn@latest add https://docscn.dev/r/banner.json` |
| github-info | registry:component | GithubInfo: a link to a GitHub repository with its star and fork counts, fetched on the server. | `npx shadcn@latest add https://docscn.dev/r/github-info.json` |
| dynamic-codeblock | registry:component | DynamicCodeBlock: a code block highlighted with Shiki in the browser, for code that's only known at runtime. | `npx shadcn@latest add https://docscn.dev/r/dynamic-codeblock.json` |
| server-codeblock | registry:component | ServerCodeBlock: a code block highlighted with Shiki in a React Server Component. | `npx shadcn@latest add https://docscn.dev/r/server-codeblock.json` |
| ai-chat | registry:component | The AI chat UI for the layouts' aiChat option, built on the AI SDK: AIChatProvider, AIChatPanel, AIChatTrigger and AIChatSearch, with streamed Markdown answers… | `npx shadcn@latest add https://docscn.dev/r/ai-chat.json` |
| docs | registry:block | Docs for a new Next.js project: every docscn component, Fumadocs MDX content in content/docs, the /docs routes and a search API. | `npx shadcn@latest add https://docscn.dev/r/docs.json` |
| ai-chat-openrouter | registry:block | Ask AI for your docs: the AI chat wired into DocsLayout, with a chat route that searches your pages and answers through OpenRouter. | `npx shadcn@latest add https://docscn.dev/r/ai-chat-openrouter.json` |
| fumadocs-ui | registry:item | Every docscn component, for migrating from Fumadocs UI: replace fumadocs-ui/ with @/components/docs/ in your imports. | `npx shadcn@latest add https://docscn.dev/r/fumadocs-ui.json` |

## For AI agents

```text
You are adding components from @docscn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/docscn.md) for the component list.
2. Fetch the machine-readable index: https://docscn.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: docscn).
```