# docscn > A shadcn/ui registry of documentation components (docs layouts, sidebars, tables of contents, search, MDX components and AI chat) built on Fumadocs Core, and a drop-in replacement for Fumadocs UI. The shadcn CLI installs the source into your project, styled with your shadcn/ui primitives and theme. ## When to use docscn - Adding a documentation site, or docs pages, to a Next.js project that uses shadcn/ui with Base UI (the `base-*` styles). - Migrating a Fumadocs project on Next.js off `fumadocs-ui`, keeping its content, routes and component names. - Adding search, a table of contents, MDX components or an AI chat to docs built on Fumadocs Core. docscn doesn't support Radix-based shadcn/ui projects or frameworks other than Next.js. ## Get started - Install the docs block: `npx shadcn@latest add @docscn/docs`. docscn is in the shadcn/ui registry index, so no setup is needed. - List every registry item: `npx shadcn@latest search @docscn`. - Install the agent skill for coding agents: `npx skills add ruiyuwg/docscn`. - Every page below is Markdown. All pages together are at https://docscn.dev/llms-full.txt. - Source: https://github.com/ruiyuwg/docscn ## Docs - [Introduction](https://docscn.dev/docs.md): Documentation components for Next.js and shadcn/ui, built on Fumadocs Core as a drop-in replacement for Fumadocs UI. - [Getting started](https://docscn.dev/docs/getting-started.md): Add docs to a Next.js project that uses shadcn/ui, with one shadcn CLI command. - [Migrating from Fumadocs UI](https://docscn.dev/docs/migrating-from-fumadocs-ui.md): Replace fumadocs-ui in an existing Fumadocs app with docscn, mostly by changing import paths. - [Theming and typography](https://docscn.dev/docs/theming.md): How docscn components use your shadcn/ui theme tokens, and the docs-typeset prose styles. - [Internationalization](https://docscn.dev/docs/internationalization.md): Translate docscn's UI strings, and add a language switcher. - [AI agents](https://docscn.dev/docs/ai-agents.md): Help coding agents use docscn, with the docscn skill and the docs as Markdown. - [Compatibility](https://docscn.dev/docs/compatibility.md): The status of every Fumadocs UI module in docscn. - **Components** - [RootProvider](https://docscn.dev/docs/components/root-provider.md): Theme, search, translation and framework providers for the root layout. - [DocsLayout](https://docscn.dev/docs/components/docs-layout.md): The docs layout with a sidebar, built on the shadcn/ui sidebar. - [DocsPage](https://docscn.dev/docs/components/docs-page.md): A docs page with a table of contents, breadcrumb and previous/next links. - [Notebook layout](https://docscn.dev/docs/components/notebook-layout.md): A more compact docs layout, with a navbar beside or above the sidebar. - [HomeLayout](https://docscn.dev/docs/components/home-layout.md): A layout for landing pages, with a navbar that matches your docs. - **Navigation** - [Sidebar](https://docscn.dev/docs/components/docs-sidebar.md): Render a Fumadocs page tree with the shadcn/ui sidebar. - [Sidebar tabs](https://docscn.dev/docs/components/sidebar-tabs.md): Switch between root folders of the page tree. - [Table of contents](https://docscn.dev/docs/components/toc.md): The table of contents that follows the headings in view. - [Page actions](https://docscn.dev/docs/components/page-actions.md): Copy a page as Markdown, or open it in GitHub and AI tools. - [Search dialog](https://docscn.dev/docs/components/search-dialog.md): Search your docs from a dialog opened with a keyboard shortcut. - [Search trigger](https://docscn.dev/docs/components/search-trigger.md): Buttons that open the search dialog: a search box with its keyboard shortcut, or an icon. - [AI chat](https://docscn.dev/docs/components/ai-chat.md): Let readers ask questions about your docs, answered from your pages. - [Theme switch](https://docscn.dev/docs/components/theme-switch.md): Switch between light, dark and system themes. - [Language select](https://docscn.dev/docs/components/language-select.md): Switch between the languages of your docs. - **Content** - [MDX components](https://docscn.dev/docs/components/mdx.md): The components for Fumadocs MDX content: code blocks, headings, images, tables, cards and callouts. - [Code block](https://docscn.dev/docs/components/codeblock.md): Code blocks and code tabs for Shiki output. - [Dynamic code block](https://docscn.dev/docs/components/dynamic-codeblock.md): A code block highlighted in the browser, for code that's only known at runtime. - [Server code block](https://docscn.dev/docs/components/server-codeblock.md): A code block highlighted in a React Server Component. - [Callout](https://docscn.dev/docs/components/callout.md): Highlight notes, tips and warnings, built on the shadcn/ui alert. - [Card](https://docscn.dev/docs/components/card.md): Link cards with an icon, title and description. - [Heading](https://docscn.dev/docs/components/heading.md): Headings with anchor links, so readers can link to any section of a page. - [Tabs](https://docscn.dev/docs/components/tabs.md): Tabbed content, with selections shared between tab groups. - [Steps](https://docscn.dev/docs/components/steps.md): Numbered steps for guides and tutorials, as components or with remark-steps. - [Accordion](https://docscn.dev/docs/components/accordion.md): Collapsible sections that can be linked to. - [Files](https://docscn.dev/docs/components/files.md): A file tree with collapsible folders, for showing a project's structure in MDX. - [Type table](https://docscn.dev/docs/components/type-table.md): A table of props or fields that expand to show their details. - [Inline TOC](https://docscn.dev/docs/components/inline-toc.md): A collapsible table of contents to place inside a page. - [Image zoom](https://docscn.dev/docs/components/image-zoom.md): An image that zooms in to fill the screen when clicked. - **Other** - [Banner](https://docscn.dev/docs/components/banner.md): An announcement bar above the layout, optionally dismissible. - [GitHub info](https://docscn.dev/docs/components/github-info.md): A link to a GitHub repository with its star and fork counts. - [OG images](https://docscn.dev/docs/components/og.md): Generate Open Graph images for docs pages. - [Utilities](https://docscn.dev/docs/components/utilities.md): Building blocks the other components share.