Documentation components built on Fumadocs Core: docs layouts, sidebars, tables of contents, search and MDX components. A drop-in replacement for Fumadocs UI.
Accordions and Accordion: collapsible sections that open from the URL hash and have a copy-link button.
Banner: an announcement bar above the layout, optionally dismissible and with a rainbow variant, that offsets docscn's layouts by its height.
Callout for notes and warnings, with info, warning, error, success and idea types.
Cards and Card: a grid of link cards with an icon, title and description.
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 line numbers.
DefaultSearchDialog: the search dialog for Fumadocs' built-in search server (createFromSource), with tag filters and default links. RootProvider loads it by default.
Docs for a new Next.js project: every docscn component, Fumadocs MDX content in content/docs, the /docs routes and a search API.
DocsLayout: the docs layout on the shadcn/ui sidebar, with the page tree, search, layout tabs, links, a theme switch and a mobile navbar.
DocsPage, DocsTitle, DocsDescription and DocsBody, with the breadcrumb, previous/next links, the table of contents (a popover on small screens), EditOnGitHub and PageLastUpdate.
SidebarPageTree renders a Fumadocs page tree (pages, folders, separators, icons, external links) with the shadcn/ui sidebar menu, and SidebarLinkItem renders layout links.
Shared helpers used by docscn components: URL matching, ref merging, hotkeys, copy-button state and tab groups that share a selection.
DynamicCodeBlock: a code block highlighted with Shiki in the browser, for code that's only known at runtime.
Files, Folder and File: a file tree with collapsible folders, also rendered from remark-mdx-files output.
Every docscn component, for migrating from Fumadocs UI: replace fumadocs-ui/ with @/components/docs/ in your imports.
GithubInfo: a link to a GitHub repository with its star and fork counts, fetched on the server.
Heading with an anchor link and a button that copies the link to the section.
HomeLayout: a layout for landing pages with a navbar (links, navigation menus, search, theme switch) and a mobile menu, plus DefaultNotFound for 404 pages.
defineI18nUI, i18nProvider and uiTranslations: build RootProvider's i18n prop from a Fumadocs Core i18n config, with translations of the UI strings keyed as in Fumadocs UI.
I18nProvider and useI18n: the current locale, the available locales and the UI string translations, which RootProvider's i18n prop sets.
ImageZoom: an image that zooms in to fill the screen when clicked, built on react-medium-image-zoom.
InlineTOC: a collapsible table of contents to place inside a page.
LanguageSelect and LanguageSelectText: a popover listing the locales from RootProvider's i18n prop, shown by the layouts when there is more than one.
defaultMdxComponents for Fumadocs MDX content (code blocks, headings, links, images, tables, cards and callouts) and createRelativeLink.
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 sidebar or the navbar.
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, EditOnGitHub and PageLastUpdate.
generateOGImage: a default Open Graph image for docs pages, rendered with next/og.
MarkdownCopyButton copies the page as Markdown, and ViewOptionsPopover links to the source on GitHub, the Markdown, and ChatGPT, Claude, Cursor and Scira.
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.
RootProvider for the root layout: theme (next-themes) with a `d` hotkey, the default search dialog, tooltips, text direction and Next.js framework adapters.
SearchProvider and useSearchContext: the search dialog's open state, its Meta/Ctrl+K hotkey and shared dialog types.
The search dialog's parts (SearchDialog, SearchDialogContent, SearchDialogInput, SearchDialogList, TagsList, ...) for building a search dialog for any Fumadocs search client, with highlighted matches and keyboard navigation.
SearchTrigger (icon button) and FullSearchTrigger (search field with hotkey hint) that open the search dialog.
ServerCodeBlock: a code block highlighted with Shiki in a React Server Component.
BaseLayoutProps, link items, layout tabs and helpers shared by the docs, notebook and home layouts.
getSidebarTabs and SidebarTabsDropdown: switch between root folders of the page tree from a dropdown in the sidebar.
Steps and Step: numbered steps on a line, plus the styles for the fd-steps and fd-step classes that remark-steps adds.
TOCProvider, TOCScrollArea and the TOC items in three styles: the default, with a thumb that follows the headings in view, clerk and block.
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 hash.
ThemeSwitch: a light/dark toggle, or a light/dark/system toggle group.
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.
The docs-typeset class for MDX content, built from your shadcn/ui theme tokens. Add not-docs-typeset to opt an element out.