@docscn

Shared helpers used by docscn components: URL matching, ref merging, hotkeys, copy-button state and tab groups that share a selection.

SearchProvider and useSearchContext: the search dialog's open state, its Meta/Ctrl+K hotkey and shared dialog types.

I18nProvider and useI18n: the current locale, the available locales and the UI string translations, which RootProvider's i18n prop sets.

defineI18nUI, i18nProvider and uiTranslations: build RootProvider's i18n prop from a Fumadocs Core i18n config, with translations of the UI strings keyed as in…

RootProvider for the root layout: theme (next-themes) with a `d` hotkey, the default search dialog, tooltips, text direction and Next.js framework adapters.

ThemeSwitch: a light/dark toggle, or a light/dark/system toggle group.

SearchTrigger (icon button) and FullSearchTrigger (search field with hotkey hint) that open the search dialog.

LanguageSelect and LanguageSelectText: a popover listing the locales from RootProvider's i18n prop, shown by the layouts when there is more than one.

BaseLayoutProps, link items, layout tabs, the AI chat panel and helpers shared by the docs, notebook and home layouts.

The docs-typeset class for MDX content, built from your shadcn/ui theme tokens. Add not-docs-typeset to opt an element out.

Heading with an anchor link and a button that copies the link to the section.

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 …

Cards and Card: a grid of link cards with an icon, title and description.

Callout for notes and warnings, with info, warning, error, success and idea types.

defaultMdxComponents for Fumadocs MDX content (code blocks, headings, links, images, tables, cards and callouts) and createRelativeLink.

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.

SidebarPageTree renders a Fumadocs page tree (pages, folders, separators, icons, external links) with the shadcn/ui sidebar menu, and SidebarLinkItem renders l…

getSidebarTabs and SidebarTabsDropdown: switch between root folders of the page tree from a dropdown in the sidebar.

DocsLayout: the docs layout on the shadcn/ui sidebar, with the page tree, search, layout tabs, links, a theme switch and a mobile navbar.

TOCProvider, TOCScrollArea and the TOC items in three styles: the default, with a thumb that follows the headings in view, clerk and block.

MarkdownCopyButton copies the page as Markdown, and ViewOptionsPopover links to the source on GitHub, the Markdown, and ChatGPT, Claude, Cursor and Scira.

DocsPage, DocsTitle, DocsDescription and DocsBody, with the breadcrumb, previous/next links, the table of contents (a popover on small screens), EditOnGitHub a…

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…

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…

The search dialog's parts (SearchDialog, SearchDialogContent, SearchDialogInput, SearchDialogList, TagsList, ...) for building a search dialog for any Fumadocs…

DefaultSearchDialog: the search dialog for Fumadocs' built-in search server (createFromSource), with tag filters and default links. RootProvider loads it by de…

HomeLayout: a layout for landing pages with a navbar (links, navigation menus, search, theme switch) and a mobile menu, plus DefaultNotFound for 404 pages.

generateOGImage: a default Open Graph image for docs pages, rendered with next/og.

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…

Steps and Step: numbered steps on a line, plus the styles for the fd-steps and fd-step classes that remark-steps adds.

Accordions and Accordion: collapsible sections that open from the URL hash and have a copy-link button.

Files, Folder and File: a file tree with collapsible folders, also rendered from remark-mdx-files output.

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.

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.

Banner: an announcement bar above the layout, optionally dismissible and with a rainbow variant, that offsets docscn's layouts by its height.

GithubInfo: a link to a GitHub repository with its star and fork counts, fetched on the server.

DynamicCodeBlock: a code block highlighted with Shiki in the browser, for code that's only known at runtime.

ServerCodeBlock: a code block highlighted with Shiki in a React Server Component.

The AI chat UI for the layouts' aiChat option, built on the AI SDK: AIChatProvider, AIChatPanel, AIChatTrigger and AIChatSearch, with streamed Markdown answers…

Docs for a new Next.js project: every docscn component, Fumadocs MDX content in content/docs, the /docs routes and a search API.

Ask AI for your docs: the AI chat wired into DocsLayout, with a chat route that searches your pages and answers through OpenRouter.

Every docscn component, for migrating from Fumadocs UI: replace fumadocs-ui/ with @/components/docs/ in your imports.