`. ## Other exports [#other-exports] * `EditOnGitHub`: a link button, e.g. ``. * `PageLastUpdate`: shows `Last updated on ` in the reader's locale, from a `date` prop. * `PageBreadcrumb` and `PageFooter`: the breadcrumb and footer on their own. * `MarkdownCopyButton` and `ViewOptionsPopover`: the [page actions](/docs/components/page-actions). * `useDocsPage()`: returns `{ full }`. # Sidebar (/docs/components/docs-sidebar) > Render a Fumadocs page tree with the shadcn/ui sidebar. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/docs-sidebar ``` ```bash pnpm dlx shadcn@latest add @docscn/docs-sidebar ``` ```bash yarn dlx shadcn@latest add @docscn/docs-sidebar ``` ```bash bun x shadcn@latest add @docscn/docs-sidebar ``` ## Usage [#usage] [`DocsLayout`](/docs/components/docs-layout) renders the sidebar for you. Use `SidebarPageTree` directly to build your own layout on the shadcn/ui sidebar. It reads the page tree from `TreeContextProvider` ([tree context](/docs/components/utilities)): ```tsx import { Sidebar, SidebarContent, SidebarProvider, } from "@/components/ui/sidebar"; import { SidebarPageTree } from "@/components/docs/components/sidebar/page-tree"; import { TreeContextProvider } from "@/components/docs/contexts/tree"; ; ``` Top-level separators become `SidebarGroup` labels. Pages render as `SidebarMenuButton` links, and folders as collapsible `SidebarMenuSub` lists that open when the current page is inside them. A folder with an index page links to it and has a separate button to expand it. The active page is scrolled into view, and the mobile sheet closes after navigating. `SidebarPageTree` accepts `Item`, `Folder` and `Separator` components to replace how each kind of node renders. Wrap it in `SidebarTreeOptionsProvider` to set `defaultOpenLevel` and `prefetch`. `SidebarLinkItem` (in `components/sidebar/link-item`) renders a layout link (`LinkItemType`) the same way. # Dynamic code block (/docs/components/dynamic-codeblock) > A code block highlighted in the browser, for code that's only known at runtime. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/dynamic-codeblock ``` ```bash pnpm dlx shadcn@latest add @docscn/dynamic-codeblock ``` ```bash yarn dlx shadcn@latest add @docscn/dynamic-codeblock ``` ```bash bun x shadcn@latest add @docscn/dynamic-codeblock ``` ## Usage [#usage] ```tsx import { DynamicCodeBlock } from "@/components/docs/components/dynamic-codeblock"; ; ``` It loads Shiki in the browser and highlights the code with the GitHub light and dark themes, using the same [code block](/docs/components/codeblock) as your content. Until Shiki has loaded, it shows the code without colours. Shiki's full bundle is large. To load less, use `DynamicCodeBlock` from `components/dynamic-codeblock.core` with your own highlighter, built with only the languages and themes you need. For code that's known on the server, [`ServerCodeBlock`](/docs/components/server-codeblock) sends no JavaScript to the browser. ## Props [#props] # Files (/docs/components/files) > A file tree with collapsible folders, for showing a project's structure in MDX. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/files ``` ```bash pnpm dlx shadcn@latest add @docscn/files ``` ```bash yarn dlx shadcn@latest add @docscn/files ``` ```bash bun x shadcn@latest add @docscn/files ``` ## Usage [#usage] ```mdx import { File, Files, Folder } from "@/components/docs/components/files"; ``` The `docs` block adds `Files`, `Folder` and `File` to your MDX components, which Fumadocs' opt-in `remark-mdx-files` plugin needs: it turns `files` code blocks into these components. ## Props [#props] | Component | Prop | Type | Description | | --------- | ------------- | ----------- | ----------------------------- | | `Folder` | `name` | `string` | The folder's name. | | `Folder` | `defaultOpen` | `boolean` | Open the folder at first. | | `Folder` | `disabled` | `boolean` | Keep the folder from opening. | | `File` | `name` | `string` | The file's name. | | `File` | `icon` | `ReactNode` | Replace the file icon. | Folders are built on shadcn/ui `collapsible`. # GitHub info (/docs/components/github-info) > A link to a GitHub repository with its star and fork counts. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/github-info ``` ```bash pnpm dlx shadcn@latest add @docscn/github-info ``` ```bash yarn dlx shadcn@latest add @docscn/github-info ``` ```bash bun x shadcn@latest add @docscn/github-info ``` ## Usage [#usage] `GithubInfo` is a React Server Component that fetches the counts from GitHub's API, cached for 60 seconds. It fits in the sidebar's footer or the layout's links: ```tsx title="lib/layout.shared.tsx" import { GithubInfo } from "@/components/docs/components/github-info"; export function baseOptions(): BaseLayoutProps { return { links: [ { type: "custom", children: , }, ], }; } ``` Unauthenticated requests to GitHub's API are rate limited. Pass a `token` (for example `process.env.GITHUB_TOKEN`) on busy sites. `fetchRepositoryInfo()` returns the counts without the link. ## Props [#props] # Heading (/docs/components/heading) > Headings with anchor links, so readers can link to any section of a page. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/heading ``` ```bash pnpm dlx shadcn@latest add @docscn/heading ``` ```bash yarn dlx shadcn@latest add @docscn/heading ``` ```bash bun x shadcn@latest add @docscn/heading ``` ## Usage [#usage] `defaultMdxComponents` renders `h1`–`h6` with `Heading`. A heading with an `id` (Fumadocs MDX adds one to every heading) links to itself, and shows a button on hover that copies the link to the section. ```tsx import { Heading } from "@/components/docs/components/heading"; Installation ; ``` # HomeLayout (/docs/components/home-layout) > A layout for landing pages, with a navbar that matches your docs. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/home-layout ``` ```bash pnpm dlx shadcn@latest add @docscn/home-layout ``` ```bash yarn dlx shadcn@latest add @docscn/home-layout ``` ```bash bun x shadcn@latest add @docscn/home-layout ``` ## Usage [#usage] ```tsx title="app/(home)/layout.tsx" import { HomeLayout } from "@/components/docs/layouts/home"; import { baseOptions } from "@/lib/layout.shared"; export default function Layout({ children }: LayoutProps<"/">) { return {children}; } ``` The navbar shows the title, links (with navigation menus for `type: "menu"` links), search and the theme switch. On small screens, links move into a menu that opens below the navbar. It takes the same `nav`, `links`, `githubUrl`, `themeSwitch` and `searchToggle` options as [`DocsLayout`](/docs/components/docs-layout), plus `nav.enableHoverToOpen` to open the mobile menu on hover. Other props are passed to its `

`. ## Not found page [#not-found-page] `DefaultNotFound` is a ready-made 404 message with a link home: ```tsx title="app/not-found.tsx" import { HomeLayout } from "@/components/docs/layouts/home"; import { DefaultNotFound } from "@/components/docs/layouts/home/not-found"; import { baseOptions } from "@/lib/layout.shared"; export default function NotFound() { return ( ); } ``` # Image zoom (/docs/components/image-zoom) > An image that zooms in to fill the screen when clicked. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/image-zoom ``` ```bash pnpm dlx shadcn@latest add @docscn/image-zoom ``` ```bash yarn dlx shadcn@latest add @docscn/image-zoom ``` ```bash bun x shadcn@latest add @docscn/image-zoom ``` ## Usage [#usage] `ImageZoom` takes the props of Next.js' `Image`. To make every image in your content zoomable, render Markdown images with it in `components/mdx.tsx`: ```tsx title="components/mdx.tsx" import { ImageZoom, type ImageZoomProps, } from "@/components/docs/components/image-zoom"; export function getMDXComponents(components?: MDXComponents) { return { ...defaultMdxComponents, img: (props) => , ...components, } satisfies MDXComponents; } ``` It's built on [react-medium-image-zoom](https://github.com/rpearce/react-medium-image-zoom). Installing it adds the styles the zoomed image needs to your global stylesheet, with the page's `--background` behind the image. ## Props [#props] # Inline TOC (/docs/components/inline-toc) > A collapsible table of contents to place inside a page. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/inline-toc ``` ```bash pnpm dlx shadcn@latest add @docscn/inline-toc ``` ```bash yarn dlx shadcn@latest add @docscn/inline-toc ``` ```bash bun x shadcn@latest add @docscn/inline-toc ``` ## Usage [#usage] In MDX, Fumadocs MDX passes the page's headings as `toc`: ```mdx import { InlineTOC } from "@/components/docs/components/inline-toc"; ``` Elsewhere, pass `page.data.toc`, or any `TOCItemType[]`. Children replace the "Table of Contents" label. ## Props [#props] # Language select (/docs/components/language-select) > Switch between the languages of your docs. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/language-select ``` ```bash pnpm dlx shadcn@latest add @docscn/language-select ``` ```bash yarn dlx shadcn@latest add @docscn/language-select ``` ```bash bun x shadcn@latest add @docscn/language-select ``` ## Usage [#usage] When `RootProvider`'s `i18n` prop lists more than one language, the docs, notebook and home layouts show a language switcher: in the docs layout's sidebar, and in the navbar of the notebook and home layouts. See [Internationalization](/docs/internationalization) to set up the languages. `LanguageSelect` is a button that opens a popover with the languages. Its children are the button's content, and `LanguageSelectText` shows the current language's name: ```tsx import { Languages } from "lucide-react"; import { LanguageSelect, LanguageSelectText, } from "@/components/docs/layouts/shared/slots/language-select"; ; ``` Choosing a language calls `i18n.onLocaleChange` if you passed one to `RootProvider`. Otherwise it swaps the locale at the start of the URL, following your i18n config's `hideLocale` option. ## Props [#props] # MDX components (/docs/components/mdx) > The components for Fumadocs MDX content: code blocks, headings, images, tables, cards and callouts. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/mdx ``` ```bash pnpm dlx shadcn@latest add @docscn/mdx ``` ```bash yarn dlx shadcn@latest add @docscn/mdx ``` ```bash bun x shadcn@latest add @docscn/mdx ``` ## Usage [#usage] Spread `defaultMdxComponents` into your MDX components: ```tsx title="components/mdx.tsx" import type { MDXComponents } from "mdx/types"; import defaultMdxComponents from "@/components/docs/mdx"; export function getMDXComponents(components?: MDXComponents) { return { ...defaultMdxComponents, ...components, } satisfies MDXComponents; } ``` It covers everything Fumadocs MDX's default preset emits: | Key | Renders | | ---------------------------------------------------------------------------- | ------------------------------------------------------------ | | `pre` | [`CodeBlock`](/docs/components/codeblock) for Shiki output | | `CodeBlockTabs`, `CodeBlockTabsList`, `CodeBlockTabsTrigger`, `CodeBlockTab` | Code tabs from `tab="..."` code blocks and ` ```npm ` blocks | | `h1`–`h6` | [`Heading`](/docs/components/heading) with anchor links | | `a` | Fumadocs Core's `Link` (Next.js `Link` for internal links) | | `img` | Next.js `Image` | | `table` | A horizontally scrollable table | | `Card`, `Cards` | [Cards](/docs/components/card) | | `Callout`, `CalloutContainer`, `CalloutTitle`, `CalloutDescription` | [Callouts](/docs/components/callout) | The `docs` block's `components/mdx.tsx` also adds [Tabs](/docs/components/tabs), [Steps](/docs/components/steps), [Accordion](/docs/components/accordion), [Files](/docs/components/files) and [TypeTable](/docs/components/type-table), which Fumadocs UI's default components leave out. If you migrated from Fumadocs UI, import them in `components/mdx.tsx` the same way. ## Relative links [#relative-links] `createRelativeLink` resolves links to other MDX files (`[Next](./next.mdx)`) to their page URLs. It works in server components only: ```tsx ``` # Notebook layout (/docs/components/notebook-layout) > A more compact docs layout, with a navbar beside or above the sidebar.

The notebook layout with the navbar above the sidebar and layout tabs below it

## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/notebook-layout @docscn/notebook-page ``` ```bash pnpm dlx shadcn@latest add @docscn/notebook-layout @docscn/notebook-page ``` ```bash yarn dlx shadcn@latest add @docscn/notebook-layout @docscn/notebook-page ``` ```bash bun x shadcn@latest add @docscn/notebook-layout @docscn/notebook-page ``` ## Usage [#usage] The notebook layout has its own `DocsLayout` and `DocsPage`. Import both from `layouts/notebook`: ```tsx title="app/docs/layout.tsx" import { DocsLayout } from "@/components/docs/layouts/notebook"; import { baseOptions } from "@/lib/layout.shared"; import { source } from "@/lib/source"; export default function Layout({ children }: LayoutProps<"/docs">) { const base = baseOptions(); return ( {children} ); } ``` ```tsx title="app/docs/[[...slug]]/page.tsx" import { DocsBody, DocsDescription, DocsPage, DocsTitle, } from "@/components/docs/layouts/notebook/page"; ``` The page components take the same props as [`DocsPage`](/docs/components/docs-page) and its companions, so switching layouts means changing `layouts/docs` to `layouts/notebook` in both imports. Like [`DocsLayout`](/docs/components/docs-layout), it's built on the shadcn/ui sidebar, so `useSidebar()` works inside it. Unlike it, the navbar shows on desktop too, with search, the links and the theme switch. When the sidebar is collapsed, the navbar shows the title and a button to open the sidebar again. The layout spans the full width of the window, with the sidebar against its edge. Fumadocs UI's notebook layout is centred at up to 97rem wide. The [AI chat](/docs/components/docs-layout#ai-chat) panel (`aiChat`) works as in `DocsLayout`. With `nav.mode: "top"`, it docks below the navbar. ## Props [#props] It takes the same props as [`DocsLayout`](/docs/components/docs-layout), except for the ones below. `sidebar` takes the same options as `DocsLayout`'s, except `enabled`: the notebook layout always has a sidebar. Search shows in the navbar, not the sidebar. # OG images (/docs/components/og) > Generate Open Graph images for docs pages. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/og ``` ```bash pnpm dlx shadcn@latest add @docscn/og ``` ```bash yarn dlx shadcn@latest add @docscn/og ``` ```bash bun x shadcn@latest add @docscn/og ``` ## Usage [#usage] ```tsx title="app/og/docs/[...slug]/route.tsx" import { notFound } from "next/navigation"; import { generateOGImage } from "@/components/docs/og"; import { source } from "@/lib/source"; export async function GET( _req: Request, { params }: RouteContext<"/og/docs/[...slug]">, ) { const { slug } = await params; const page = source.getPage(slug.slice(0, -1)); if (!page) notFound(); return generateOGImage({ title: page.data.title, description: page.data.description, site: "My App", }); } ``` `generateOGImage` returns a 1200×630 `ImageResponse` from `next/og`. It takes `title`, `description`, `site`, `icon`, `primaryColor` and `primaryTextColor`, plus `ImageResponse` options such as `fonts`. `generate` returns the image's JSX, to render with your own `ImageResponse`. # Page actions (/docs/components/page-actions) > Copy a page as Markdown, or open it in GitHub and AI tools. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/page-actions ``` ```bash pnpm dlx shadcn@latest add @docscn/page-actions ``` ```bash yarn dlx shadcn@latest add @docscn/page-actions ``` ```bash bun x shadcn@latest add @docscn/page-actions ``` ## Usage [#usage] Both actions need a route that serves the page's Markdown. With Fumadocs MDX, enable `includeProcessedMarkdown` and add a route as in the [Fumadocs docs](https://fumadocs.dev/docs/integrations/llms). Then add the actions to your page: ```tsx title="app/docs/[[...slug]]/page.tsx" import { MarkdownCopyButton, ViewOptionsPopover, } from "@/components/docs/layouts/docs/page";

; ``` | Component | Props | Description | | -------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | `MarkdownCopyButton` | `markdownUrl` | Copies the page's Markdown to the clipboard. | | `ViewOptionsPopover` | `markdownUrl?`, `githubUrl?`, `pageUrl?` | A popover with links to the source on GitHub, the Markdown, and ChatGPT, Claude, Cursor and Scira with a prompt about the page. | Both are built on shadcn/ui `button` and `popover`, and are also exported from `components/docs/layouts/shared/page-actions`. # RootProvider (/docs/components/root-provider) > Theme, search, translation and framework providers for the root layout. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/root-provider ``` ```bash pnpm dlx shadcn@latest add @docscn/root-provider ``` ```bash yarn dlx shadcn@latest add @docscn/root-provider ``` ```bash bun x shadcn@latest add @docscn/root-provider ``` ## Usage [#usage] Wrap your app in `RootProvider` in the root layout, and add `suppressHydrationWarning` to `` for next-themes: ```tsx title="app/layout.tsx" import { RootProvider } from "@/components/docs/provider/next"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` It provides: * [next-themes](https://github.com/pacocoursey/next-themes), with a D hotkey to switch between light and dark mode * search, with the [default search dialog](/docs/components/search-dialog) opened by ⌘ K or Ctrl K * shadcn/ui's `TooltipProvider`, which the sidebar uses * Base UI's `DirectionProvider` * translations of the UI strings, with the `i18n` prop * Fumadocs Core's Next.js adapter, for links, images and routing ## Props [#props] `useTheme` is re-exported from `@/components/docs/provider/base`. # Search dialog (/docs/components/search-dialog) > Search your docs from a dialog opened with a keyboard shortcut. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/search-dialog-default ``` ```bash pnpm dlx shadcn@latest add @docscn/search-dialog-default ``` ```bash yarn dlx shadcn@latest add @docscn/search-dialog-default ``` ```bash bun x shadcn@latest add @docscn/search-dialog-default ``` ## Usage [#usage] `RootProvider` opens the default search dialog with ⌘ K (Ctrl K on Windows and Linux), or from the search triggers in the layouts. It queries `/api/search`, which you create with Fumadocs Core's search server: ```ts title="app/api/search/route.ts" import { createFromSource } from "fumadocs-core/search/server"; import { source } from "@/lib/source"; export const { GET } = createFromSource(source); ``` Results show pages, headings and text with the matches highlighted. Use the arrow keys and Enter to open one, and Esc to close the dialog. ## Options [#options] Pass options to the default dialog through `RootProvider`: ```tsx ``` | Option | Type | Description | | ------------ | ---------------- | ---------------------------------------------- | | `api` | `string` | The search API URL. Defaults to `/api/search`. | | `delayMs` | `number` | Debounce delay before searching. | | `tags` | `TagItem[]` | Tag filters shown below the results. | | `defaultTag` | `string` | The tag selected at first. | | `allowClear` | `boolean` | Allow deselecting the tag. | | `footer` | `ReactNode` | Extra content at the bottom of the dialog. | | `links` | `[name, href][]` | Links shown before the reader types a query. | ## Build your own dialog [#build-your-own-dialog] The `search-dialog` component exports the parts the default dialog is made of, for other search clients: ```tsx import { useDocsSearch } from "fumadocs-core/search/client"; import { SearchDialog, SearchDialogClose, SearchDialogContent, SearchDialogHeader, SearchDialogIcon, SearchDialogInput, SearchDialogList, SearchDialogOverlay, type SharedProps, } from "@/components/docs/components/dialog/search"; export default function CustomSearchDialog(props: SharedProps) { const { search, setSearch, query } = useDocsSearch({ client: myClient }); return ( ); } ``` Pass it to `RootProvider` as `search={{ SearchDialog: CustomSearchDialog }}`. The dialog is built on Base UI's `Dialog`, the primitive under shadcn/ui's `dialog`, with shadcn/ui `kbd`. # Search trigger (/docs/components/search-trigger) > Buttons that open the search dialog: a search box with its keyboard shortcut, or an icon. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/search-trigger ``` ```bash pnpm dlx shadcn@latest add @docscn/search-trigger ``` ```bash yarn dlx shadcn@latest add @docscn/search-trigger ``` ```bash bun x shadcn@latest add @docscn/search-trigger ``` ## Usage [#usage] The layouts show these for you. To add one elsewhere inside `RootProvider`: ```tsx import { FullSearchTrigger, SearchTrigger, } from "@/components/docs/layouts/shared/slots/search-trigger"; ``` `SearchTrigger` is an icon button, and accepts shadcn/ui `Button`'s `variant` and `size`. `FullSearchTrigger` looks like a search field and shows the hotkey with shadcn/ui `kbd`. Pass `hideIfDisabled` to hide either when search is turned off in `RootProvider`. # Server code block (/docs/components/server-codeblock) > A code block highlighted in a React Server Component. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/server-codeblock ``` ```bash pnpm dlx shadcn@latest add @docscn/server-codeblock ``` ```bash yarn dlx shadcn@latest add @docscn/server-codeblock ``` ```bash bun x shadcn@latest add @docscn/server-codeblock ``` ## Usage [#usage] ```tsx import { ServerCodeBlock } from "@/components/docs/components/codeblock.rsc"; ; ``` `ServerCodeBlock` is an async React Server Component. It highlights the code with Shiki on the server, using the same [code block](/docs/components/codeblock) as your content, and sends no highlighting code to the browser. For code that's only known in the browser, use [`DynamicCodeBlock`](/docs/components/dynamic-codeblock). ## Props [#props] # Sidebar tabs (/docs/components/sidebar-tabs) > Switch between root folders of the page tree. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/sidebar-tabs ``` ```bash pnpm dlx shadcn@latest add @docscn/sidebar-tabs ``` ```bash yarn dlx shadcn@latest add @docscn/sidebar-tabs ``` ```bash bun x shadcn@latest add @docscn/sidebar-tabs ``` ## Usage [#usage] Mark folders as root folders in their `meta.json`: ```json title="content/docs/guides/meta.json" { "title": "Guides", "description": "Learn the basics", "root": true } ``` [`DocsLayout`](/docs/components/docs-layout) then shows a dropdown at the top of the sidebar to switch between them, built on shadcn/ui `dropdown-menu`. Only the current root folder's pages show in the sidebar. Customise the tabs with the layout's `tabs` option: an array of `LayoutTab` (`title`, `url`, `icon`, `description`), `{ transform }` to change the generated tabs, or `false` to turn them off. `getSidebarTabs(tree)` and `SidebarTabsDropdown` are exported for custom layouts. # Steps (/docs/components/steps) > Numbered steps for guides and tutorials, as components or with remark-steps. ### Install the registry [#install-the-registry] Add `@docscn` to your `components.json`. ### Add the components [#add-the-components] Install `@docscn/docs`. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/steps ``` ```bash pnpm dlx shadcn@latest add @docscn/steps ``` ```bash yarn dlx shadcn@latest add @docscn/steps ``` ```bash bun x shadcn@latest add @docscn/steps ``` ## Usage [#usage] ```mdx import { Step, Steps } from "@/components/docs/components/steps"; ### Install the registry Add `@docscn` to your `components.json`. ### Add the components Install `@docscn/docs`. ``` The `docs` block adds `Steps` and `Step` to your MDX components. ## remark-steps [#remark-steps] Fumadocs' opt-in `remark-steps` plugin turns headings such as `### 1. Install` into steps, by wrapping them in `div`s with the `fd-steps` and `fd-step` classes. Installing `steps` adds the styles for those classes to your global stylesheet, so the plugin's output renders the same as the components. # Tabs (/docs/components/tabs) > Tabbed content, with selections shared between tab groups. Install with `pnpm add next-themes` . Install with `npm install next-themes` . Install with `yarn add next-themes` . ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/docs-tabs ``` ```bash pnpm dlx shadcn@latest add @docscn/docs-tabs ``` ```bash yarn dlx shadcn@latest add @docscn/docs-tabs ``` ```bash bun x shadcn@latest add @docscn/docs-tabs ``` ## Usage [#usage] The `docs` block adds `Tabs` and `Tab` to your MDX components. Otherwise, add them to `components/mdx.tsx` or import them in a page: ```mdx import { Tab, Tabs } from "@/components/docs/components/tabs"; Install with `pnpm add next-themes`. Install with `npm install next-themes`. Install with `yarn add next-themes`. ``` With `items`, each `Tab` matches an item by its order. Pass `value` to match a tab explicitly instead, or leave out `items` and compose the list yourself with `TabsList` and `TabsTrigger`: ```mdx React Vue ... ... ``` ## Shared and persisted selections [#shared-and-persisted-selections] Tabs with the same `groupId` stay in sync: picking "npm" in one switches every tab group on the site with that `groupId`. The selection is kept for the session, and `persist` keeps it across visits. ```mdx ``` ## Linking to a tab [#linking-to-a-tab] Give a `Tab` an `id`, and a link to `#id` opens that tab. A link to an element inside a tab opens the tab too. With `updateAnchor`, selecting a tab updates the URL hash to its `id`. ## Props [#props] `Tabs` is built on shadcn/ui `tabs`, and also accepts its props, such as `defaultValue`, `value` and `onValueChange`. # Theme switch (/docs/components/theme-switch) > Switch between light, dark and system themes. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/theme-switch ``` ```bash pnpm dlx shadcn@latest add @docscn/theme-switch ``` ```bash yarn dlx shadcn@latest add @docscn/theme-switch ``` ```bash bun x shadcn@latest add @docscn/theme-switch ``` ## Usage [#usage] The docs, notebook and home layouts show a theme switch. Configure it with the layout's `themeSwitch` option, or use it on its own inside `RootProvider`: ```tsx import { ThemeSwitch } from "@/components/docs/layouts/shared/slots/theme-switch"; ``` `mode="light-dark"` (the default) is a button that toggles between light and dark. `mode="light-dark-system"` is a shadcn/ui `toggle-group` with a system option. # Table of contents (/docs/components/toc) > The table of contents that follows the headings in view. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/toc ``` ```bash pnpm dlx shadcn@latest add @docscn/toc ``` ```bash yarn dlx shadcn@latest add @docscn/toc ``` ```bash bun x shadcn@latest add @docscn/toc ``` ## Usage [#usage] [`DocsPage`](/docs/components/docs-page) shows the TOC beside the page on wide screens and as a popover on smaller ones. To use it elsewhere: ```tsx import { TOCProvider, TOCScrollArea } from "@/components/docs/components/toc"; import { TOCItem, TOCItems } from "@/components/docs/components/toc/default"; {toc.map((item) => ( ))} ; ``` The active headings are highlighted with a thumb on a line that follows the heading levels. `useActiveAnchor`, `useActiveAnchors`, `useItems` and `useTOCItems` are re-exported from `components/toc`. ## Styles [#styles] Pick a style for `DocsPage`'s TOC and TOC popover with `style`: ```tsx {/* ... */} ``` | Style | Module | Looks like | | ------------------ | ------------------------ | ---------------------------------------------------------------------------------- | | `normal` (default) | `components/toc/default` | A line that curves with the heading levels, and a thumb on the active headings. | | `clerk` | `components/toc/clerk` | A line that steps with the heading levels, highlighted beside the active headings. | | `block` | `components/toc/block` | A highlight behind the active headings. | Each module exports `TOCItems`, `TOCItem` and `TOCEmpty`, so you can swap them in the example above. # Type table (/docs/components/type-table) > A table of props or fields that expand to show their details. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/type-table ``` ```bash pnpm dlx shadcn@latest add @docscn/type-table ``` ```bash yarn dlx shadcn@latest add @docscn/type-table ``` ```bash bun x shadcn@latest add @docscn/type-table ``` ## Usage [#usage] ```mdx import { TypeTable } from "@/components/docs/components/type-table"; The card's title., type: "ReactNode", required: true, }, href: { description: <>Makes the card a link., type: "string", }, }} /> ``` The `docs` block adds `TypeTable` to your MDX components. Give the table an `id` to make each field linkable: a field gets the id `{id}-{name}`, and opening it updates the URL hash. ## Props [#props] ### `TypeNode` [#typenode] # Utilities (/docs/components/utilities) > Building blocks the other components share. These items are installed as dependencies of the components above. You rarely install them yourself, but they're useful for custom layouts and pages. | Item | Module | Exports | | ---------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | `layout-shared` | `layouts/shared` | `BaseLayoutProps`, `NavOptions`, `LinkItemType`, `LayoutTab`, `getLayoutTabs`, `useLinkItems`, `LinkItem`, `NavTitle` | | `tree-context` | `contexts/tree`, `utils/use-footer-items` | `TreeContextProvider`, `useTreeContext`, `useTreePath`, `useTabsGroups`, `useFooterItems` | | `search-context` | `contexts/search` | `SearchProvider`, `useSearchContext`, `SearchOnly`, `SharedProps`, `SearchLink`, `TagItem` | | `docs-utils` | `utils/*` | `isActive`, `normalize`, `mergeRefs`, `useHotKey`, `useCopyButton`, `useIsScrollTop` | | `typography` | Your global stylesheet | The [`docs-typeset`](/docs/theming#typography) class | All modules install under `components/docs/`, so `layouts/shared` is `@/components/docs/layouts/shared`. # Getting started (/docs/getting-started) > Add docs to a Next.js project that uses shadcn/ui, with one shadcn CLI command. docscn supports Next.js projects that use shadcn/ui with [Base UI](https://base-ui.com) (the `base-*` styles). ## Create a project [#create-a-project] If you don't have a project yet, create one with shadcn/ui and Base UI: npm pnpm yarn bun ```bash npx shadcn@latest init --template=next --base=base ``` ```bash pnpm dlx shadcn@latest init --template=next --base=base ``` ```bash yarn dlx shadcn@latest init --template=next --base=base ``` ```bash bun x shadcn@latest init --template=next --base=base ``` ## Install the docs block [#install-the-docs-block] docscn is listed in the [shadcn/ui registry index](https://ui.shadcn.com/docs/registry/registry-index), so the CLI finds `@docscn` items without any setup. The `docs` block installs every docscn component, plus everything a docs site needs: * `lib/source.ts`: loads `content/docs` with [Fumadocs MDX](https://fumadocs.dev/docs/mdx) * `lib/layout.shared.tsx`: shared layout options (title, links, GitHub URL) * `components/mdx.tsx`: the MDX components * `app/docs/layout.tsx` and `app/docs/[[...slug]]/page.tsx`: the docs routes * `app/api/search/route.ts`: the search API * `content/docs/index.mdx` and `meta.json`: a first page npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/docs ``` ```bash pnpm dlx shadcn@latest add @docscn/docs ``` ```bash yarn dlx shadcn@latest add @docscn/docs ``` ```bash bun x shadcn@latest add @docscn/docs ``` Fumadocs MDX depends on esbuild, and pnpm 11 won't install a package with an install script until you decide whether it may run. If the install stops with `ERR_PNPM_IGNORED_BUILDS`, pnpm has added a placeholder line, `esbuild: set this to true or false`, under `allowBuilds` in `pnpm-workspace.yaml`. Change it to `esbuild: false` (esbuild works without its script) and run the command again. ## Finish the setup [#finish-the-setup] Two files need small edits the CLI can't make for you. Wrap your app in `RootProvider`. It includes [next-themes](https://github.com/pacocoursey/next-themes), so it replaces the `ThemeProvider` from shadcn/ui's template or dark mode guide: ```tsx title="app/layout.tsx" import { RootProvider } from "@/components/docs/provider/next"; // [!code ++] export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} {/* [!code ++] */} ); } ``` Compile MDX with Fumadocs MDX: ```ts title="next.config.ts" import { createMDX } from "fumadocs-mdx/next"; // [!code ++] import type { NextConfig } from "next"; const nextConfig: NextConfig = {}; export default createMDX()(nextConfig); // [!code ++] ``` ## Run it [#run-it] Start the dev server and open [localhost:3000/docs](http://localhost:3000/docs): npm pnpm yarn bun ```bash npm run dev ``` ```bash pnpm run dev ``` ```bash yarn dev ``` ```bash bun run dev ``` Write pages as `.mdx` files in `content/docs`, and order them with `meta.json`. See the [Fumadocs docs](https://fumadocs.dev/docs) for the page and `meta.json` conventions. ## Install components one by one [#install-components-one-by-one] You can also install components individually, for example: npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/docs-layout @docscn/docs-page @docscn/mdx ``` ```bash pnpm dlx shadcn@latest add @docscn/docs-layout @docscn/docs-page @docscn/mdx ``` ```bash yarn dlx shadcn@latest add @docscn/docs-layout @docscn/docs-page @docscn/mdx ``` ```bash bun x shadcn@latest add @docscn/docs-layout @docscn/docs-page @docscn/mdx ``` Each component lists the shadcn/ui primitives and other docscn components it needs, and the CLI installs them too. See the component pages for what each one does. ## Monorepos [#monorepos] In a [shadcn/ui monorepo](https://ui.shadcn.com/docs/monorepo), run the commands on this page in your app's directory (for example `apps/web`). docscn's components install into the app, and the shadcn/ui primitives they use into the shared `packages/ui`. Two extra steps work around bugs in the shadcn CLI. Before you install docscn, add the sidebar from `packages/ui`. Installed from the app, the CLI puts the sidebar's `use-mobile` hook in the app, where the sidebar can't import it ([shadcn-ui/ui#12212](https://github.com/shadcn-ui/ui/issues/12212)): npm pnpm yarn bun ```bash npx shadcn@latest add sidebar ``` ```bash pnpm dlx shadcn@latest add sidebar ``` ```bash yarn dlx shadcn@latest add sidebar ``` ```bash bun x shadcn@latest add sidebar ``` After you install docscn, add its dependencies to your app. The CLI adds them to `packages/ui/package.json` only, so the app can't import them ([shadcn-ui/ui#12213](https://github.com/shadcn-ui/ui/issues/12213)). Run these in your app's directory: npm pnpm yarn bun ```bash npm install @base-ui/react @fuma-translate/react@^1.0.2 class-variance-authority cn fumadocs-core@^16.16.2 fumadocs-mdx@^15.4.6 lucide-react next-themes react-medium-image-zoom rehype-raw scroll-into-view-if-needed shiki@^4.5.0 unified unist-util-visit ``` ```bash pnpm add @base-ui/react @fuma-translate/react@^1.0.2 class-variance-authority cn fumadocs-core@^16.16.2 fumadocs-mdx@^15.4.6 lucide-react next-themes react-medium-image-zoom rehype-raw scroll-into-view-if-needed shiki@^4.5.0 unified unist-util-visit ``` ```bash yarn add @base-ui/react @fuma-translate/react@^1.0.2 class-variance-authority cn fumadocs-core@^16.16.2 fumadocs-mdx@^15.4.6 lucide-react next-themes react-medium-image-zoom rehype-raw scroll-into-view-if-needed shiki@^4.5.0 unified unist-util-visit ``` ```bash bun add @base-ui/react @fuma-translate/react@^1.0.2 class-variance-authority cn fumadocs-core@^16.16.2 fumadocs-mdx@^15.4.6 lucide-react next-themes react-medium-image-zoom rehype-raw scroll-into-view-if-needed shiki@^4.5.0 unified unist-util-visit ``` npm pnpm yarn bun ```bash npm install -D @types/hast @types/mdx ``` ```bash pnpm add -D @types/hast @types/mdx ``` ```bash yarn add --dev @types/hast @types/mdx ``` ```bash bun add --dev @types/hast @types/mdx ``` These are the packages the `docs` block needs. The [AI chat](/docs/components/ai-chat) needs these too: npm pnpm yarn bun ```bash npm install @ai-sdk/react@^4.0.0 ai@^7.0.0 @openrouter/ai-sdk-provider@^3.1.0 flexsearch@^0.8.212 hast-util-to-jsx-runtime@^2.3.6 remark@^15.0.1 remark-gfm@^4.0.1 remark-rehype@^11.1.2 remend@^1.4.0 zod@^4.0.0 ``` ```bash pnpm add @ai-sdk/react@^4.0.0 ai@^7.0.0 @openrouter/ai-sdk-provider@^3.1.0 flexsearch@^0.8.212 hast-util-to-jsx-runtime@^2.3.6 remark@^15.0.1 remark-gfm@^4.0.1 remark-rehype@^11.1.2 remend@^1.4.0 zod@^4.0.0 ``` ```bash yarn add @ai-sdk/react@^4.0.0 ai@^7.0.0 @openrouter/ai-sdk-provider@^3.1.0 flexsearch@^0.8.212 hast-util-to-jsx-runtime@^2.3.6 remark@^15.0.1 remark-gfm@^4.0.1 remark-rehype@^11.1.2 remend@^1.4.0 zod@^4.0.0 ``` ```bash bun add @ai-sdk/react@^4.0.0 ai@^7.0.0 @openrouter/ai-sdk-provider@^3.1.0 flexsearch@^0.8.212 hast-util-to-jsx-runtime@^2.3.6 remark@^15.0.1 remark-gfm@^4.0.1 remark-rehype@^11.1.2 remend@^1.4.0 zod@^4.0.0 ``` If you install components one by one, add the packages the CLI added to `packages/ui/package.json` instead. You can also delete the unused `hooks/use-mobile.ts` the CLI adds to your app. # Introduction (/docs) > Documentation components for Next.js and shadcn/ui, built on Fumadocs Core as a drop-in replacement for Fumadocs UI. docscn is a [shadcn/ui](https://ui.shadcn.com) registry of documentation components: a docs layout with a sidebar, docs pages with a table of contents, search, and the MDX components for code blocks, callouts and cards. You install them into your own Next.js app with the shadcn CLI, and they're built on your shadcn/ui primitives and theme, so your docs look like the rest of your project. ## How it relates to Fumadocs [#how-it-relates-to-fumadocs] docscn is a drop-in replacement for [Fumadocs UI](https://fumadocs.dev/docs/ui), built the shadcn/ui way. * Content comes from [Fumadocs Core](https://fumadocs.dev/docs/headless) and [Fumadocs MDX](https://fumadocs.dev/docs/mdx), exactly as it does with Fumadocs UI. docscn components take Fumadocs Core's types (page trees, TOC items, search results), so any content source Fumadocs supports works. * Components keep Fumadocs UI's names, props and module paths. `fumadocs-ui/layouts/docs` becomes `@/components/docs/layouts/docs`, so [migrating](/docs/migrating-from-fumadocs-ui) is a find-and-replace. * Instead of a package with its own styles and colour themes, you get the source in `components/docs/`, built on your shadcn/ui `sidebar`, `button`, `tabs`, `alert` and other primitives, and styled with your theme tokens. Edit it like any other component in your app. ## What's included [#whats-included] | Area | Components | | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Layouts | [DocsLayout](/docs/components/docs-layout), [Notebook layout](/docs/components/notebook-layout), [HomeLayout](/docs/components/home-layout) | | Pages | [DocsPage](/docs/components/docs-page), [TOC](/docs/components/toc), [page actions](/docs/components/page-actions) | | Search | [Search dialog](/docs/components/search-dialog) | | MDX | [MDX components](/docs/components/mdx), [code block](/docs/components/codeblock), [callout](/docs/components/callout), [card](/docs/components/card), [tabs](/docs/components/tabs), [steps](/docs/components/steps), [accordion](/docs/components/accordion), [files](/docs/components/files) | | Everything | [RootProvider](/docs/components/root-provider), [OG images](/docs/components/og) | See [Compatibility](/docs/compatibility) for the status of every Fumadocs UI module. ## Next steps [#next-steps] # Internationalization (/docs/internationalization) > Translate docscn's UI strings, and add a language switcher. docscn's components show their UI strings ("Search", "On this page", "Copy Markdown", ...) in English. To show them in other languages, pass translations to `RootProvider`. The API is Fumadocs UI's, so its [translation](https://fumadocs.dev/docs/ui/translations) and [internationalization](https://fumadocs.dev/docs/internationalization) guides apply, with imports from `@/components/docs/` instead of `fumadocs-ui/`. ## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/i18n ``` ```bash pnpm dlx shadcn@latest add @docscn/i18n ``` ```bash yarn dlx shadcn@latest add @docscn/i18n ``` ```bash bun x shadcn@latest add @docscn/i18n ``` `@docscn/fumadocs-ui` already includes it. `RootProvider` and the layouts support translations without it; it adds the helpers below. ## One language [#one-language] To translate the UI into a single language, define the translations with Fumadocs Core and pass them to `RootProvider`: ```tsx title="lib/layout.shared.tsx" import { defineTranslations } from "fumadocs-core/i18n"; import { uiTranslations } from "@/components/docs/i18n"; export const translations = defineTranslations().extend(uiTranslations()).add({ "Search(search trigger)": "搜索文档", "On this page(table of contents)": "本页目录", }); ``` ```tsx title="app/layout.tsx" import { i18nProvider } from "@/components/docs/i18n"; import { RootProvider } from "@/components/docs/provider/next"; import { translations } from "@/lib/layout.shared"; // ... {children}; ``` Each key is the English string, followed by notes in parentheses that say where it appears. `uiTranslations()` registers the keys, so TypeScript checks them; the full list is in `components/docs/.translations/index.ts`. The [AI chat](/docs/components/ai-chat)'s strings have their own keys, in `components/ai/chat/.translations/index.ts`. Register them with `.extend(aiChatTranslations())` from `@/components/ai/chat/i18n`. ## Several languages [#several-languages] For docs in several languages, follow Fumadocs' [Next.js internationalization guide](https://fumadocs.dev/docs/internationalization/next): it defines the languages in `lib/i18n.ts`, adds the locale middleware, moves your routes under `app/[lang]`, and passes `i18n` to `loader()`. Then add the translations for each language, and pass the current one to `RootProvider`: ```tsx title="lib/layout.shared.tsx" import { uiTranslations } from "@/components/docs/i18n"; import { i18n } from "@/lib/i18n"; export const translations = i18n .translations() .extend(uiTranslations()) .add({ en: { displayName: "English" }, cn: { displayName: "中文", "Search(search trigger)": "搜索文档", }, }); ``` ```tsx title="app/[lang]/layout.tsx" import { i18nProvider } from "@/components/docs/i18n"; import { RootProvider } from "@/components/docs/provider/next"; import { translations } from "@/lib/layout.shared"; export default async function Layout({ params, children, }: LayoutProps<"/[lang]">) { const { lang } = await params; return ( {children} ); } ``` With more than one language, the docs, notebook and home layouts show a [language switcher](/docs/components/language-select). Choosing a language swaps the locale at the start of the URL, following the `hideLocale` option. `defineI18nUI(i18n, translations)` from `@/components/docs/i18n` also works, as in Fumadocs UI: pass `i18nUI.provider(lang)` to `RootProvider`. ## Language packs [#language-packs] Fumadocs' language packs ([`@fumadocs/language`](https://fumadocs.dev/docs/ui/translations#language-packs)) use the same keys, so they translate docscn too: ```ts import { zhCN } from "@fumadocs/language/zh-cn"; export const translations = i18n .translations() .extend(uiTranslations()) .preset("cn", zhCN()); ``` docscn has two strings of its own, which language packs don't include: the labels of the sidebar's folder toggles, `Collapse(sidebar)(aria-label)` and `Expand(sidebar)(aria-label)`. Add them with `.add()`. ## Your own components [#your-own-components] The components read their strings with `useTranslations()` from [`@fuma-translate/react`](https://www.npmjs.com/package/@fuma-translate/react), the package Fumadocs UI uses. Use it for strings you add to your copies: ```tsx import { useTranslations } from "@fuma-translate/react"; const t = useTranslations({ note: "page footer" }); t("Report an issue"); // looks up "Report an issue(page footer)" ``` Register the new keys before translating them: ```ts i18n .translations() .extend(uiTranslations()) .extend({ keys: ["Report an issue(page footer)"] }) .add({ cn: { "Report an issue(page footer)": "报告问题" } }); ``` # Migrating from Fumadocs UI (/docs/migrating-from-fumadocs-ui) > Replace fumadocs-ui in an existing Fumadocs app with docscn, mostly by changing import paths. docscn keeps Fumadocs UI's component names, props and module paths, so a project made with `create-fumadocs-app` (Next.js and Fumadocs MDX) migrates in a few steps. docscn's CI runs exactly these steps on the stock template on every change. ## Steps [#steps] ### 1. Set up shadcn/ui [#1-set-up-shadcnui] If the project doesn't use shadcn/ui yet, initialise it with Base UI. It detects `app/global.css`, adds the theme tokens and creates `components.json`: npm pnpm yarn bun ```bash npx shadcn@latest init --base=base ``` ```bash pnpm dlx shadcn@latest init --base=base ``` ```bash yarn dlx shadcn@latest init --base=base ``` ```bash bun x shadcn@latest init --base=base ``` `create-fumadocs-app` leaves a placeholder for esbuild under `allowBuilds` in `pnpm-workspace.yaml`, and pnpm 11 refuses to install anything until you replace it. Set it to `esbuild: false` first. ### 2. Install the components [#2-install-the-components] Install `@docscn/fumadocs-ui`, which installs every docscn component into `components/docs/` (but no routes): npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/fumadocs-ui ``` ```bash pnpm dlx shadcn@latest add @docscn/fumadocs-ui ``` ```bash yarn dlx shadcn@latest add @docscn/fumadocs-ui ``` ```bash bun x shadcn@latest add @docscn/fumadocs-ui ``` If you added AI chat with `fumadocs add ai`, its UI in `components/ai/chat/` imports from `fumadocs-ui`. Replace it with docscn's: npm pnpm yarn bun ```bash npx shadcn@latest add @docscn/ai-chat --overwrite ``` ```bash pnpm dlx shadcn@latest add @docscn/ai-chat --overwrite ``` ```bash yarn dlx shadcn@latest add @docscn/ai-chat --overwrite ``` ```bash bun x shadcn@latest add @docscn/ai-chat --overwrite ``` ### 3. Change the imports [#3-change-the-imports] Replace `fumadocs-ui/` with `@/components/docs/` in your imports, in `app/`, `components/` and `lib/`: ```tsx title="app/docs/layout.tsx" import { DocsLayout } from "fumadocs-ui/layouts/docs"; // [!code --] import { DocsLayout } from "@/components/docs/layouts/docs"; // [!code ++] ``` ### 4. Remove Fumadocs UI's styles [#4-remove-fumadocs-uis-styles] Delete the `fumadocs-ui/css/*` imports from your global stylesheet. The docscn components installed their styles into the same file, built from your shadcn/ui theme: ```css title="app/global.css" @import "tailwindcss"; @import "fumadocs-ui/css/neutral.css"; /* [!code --] */ @import "fumadocs-ui/css/preset.css"; /* [!code --] */ ``` ### 5. Uninstall Fumadocs UI [#5-uninstall-fumadocs-ui] npm pnpm yarn bun ```bash npm uninstall fumadocs-ui ``` ```bash pnpm remove fumadocs-ui ``` ```bash yarn remove fumadocs-ui ``` ```bash bun remove fumadocs-ui ``` Then build the project. Pages, search, the OG image and Markdown routes keep working as before. ## What's different [#whats-different] These are deliberate differences from Fumadocs UI: | Fumadocs UI | docscn | | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | The `slots` prop on layouts and pages | Not supported. Edit your copy of the component instead. | | `--color-fd-*` variables and `fd-*` utility classes | Your shadcn/ui theme tokens (`--background`, `--primary`, `--sidebar-*`, ...). See [Theming and typography](/docs/theming). | | Colour themes and CSS presets (`neutral.css`, `preset.css`, ...) | Not shipped. Change your shadcn/ui theme instead. | | The `prose` class (`not-prose` to opt out) | `docs-typeset` (`not-docs-typeset` to opt out). | | `fumadocs-ui/components/ui/*` (button, tabs, popover, ...) | Your own shadcn/ui primitives in `components/ui/`. | | `fumadocs-ui/components/sidebar/base` | The shadcn/ui `sidebar`. The docs and notebook layouts use `SidebarProvider` and `SidebarInset`, so `useSidebar()` works inside docs pages. | | `createPageTreeRenderer` and `createLinkItemRenderer` | `SidebarPageTree` and `SidebarLinkItem`, rendered with the shadcn/ui sidebar menu. | | Providers for React Router, TanStack Start, Waku and Astro | Next.js only (`provider/next`). | | Fumadocs UI's Radix UI variant | Base UI only. | | Deprecated props (`nav.component`, `sidebar.tabs`, ...) | Not supported. Use the current props. | | The sidebar's desktop collapse state | Kept in shadcn/ui's `sidebar_state` cookie. Pass it to `sidebar.defaultOpen` to restore it on load. | | ⌘B | Toggles the sidebar, as in every shadcn/ui sidebar. | | Hovering the edge of a collapsed sidebar shows it | Not supported: the shadcn/ui sidebar slides away completely. Reopen it with the sidebar button or ⌘B. | | `Banner`'s layout offset | Set as `--docs-banner-height` instead of `--fd-banner-height`. | | The notebook layout's width (centred, up to 97rem) | The full width of the window, with the sidebar against its edge. | | The `aiChat` panel takes the table of contents' place | Docked against the right edge of the window, beside the whole page. The table of contents hides while it's open. | ## Not supported yet [#not-supported-yet] * **More layouts:** the flux, glass and spacious layouts. * **Search dialogs** for Algolia and Orama Cloud. Build one from the [search dialog parts](/docs/components/search-dialog). [Compatibility](/docs/compatibility) lists every Fumadocs UI module and its status. # Theming and typography (/docs/theming) > How docscn components use your shadcn/ui theme tokens, and the docs-typeset prose styles. docscn has no colour themes of its own. Every component is styled with your shadcn/ui theme tokens, so changing your theme (or [picking a new one](https://ui.shadcn.com/themes)) changes your docs too. ## Theme tokens [#theme-tokens] | Part | Tokens | | -------------------------------------- | -------------------------------------------------------------------------------- | | Page background and text | `--background`, `--foreground`, `--muted-foreground` | | Sidebar | `--sidebar`, `--sidebar-foreground`, `--sidebar-accent`, `--sidebar-border`, ... | | Code blocks, cards and callouts | `--card`, `--muted`, `--border`, `--radius` | | Links, active TOC items and highlights | `--foreground`, `--primary` | | Search dialog and menus | `--popover`, `--accent` | Callouts add their own colours for the info, warning, success and idea types, and use `--destructive` for errors. Change them in `components/docs/components/callout.tsx`. ## Dark mode [#dark-mode] `RootProvider` sets up [next-themes](https://github.com/pacocoursey/next-themes) with the same defaults as shadcn/ui's dark mode guide: the `class` attribute, the system theme by default, and no transitions while switching. Pass options with the `theme` prop: ```tsx {children} ``` Press D to switch between light and dark mode (pass `theme={{ hotKey: false }}` to turn this off), or use the `ThemeSwitch` in the sidebar and navbar. ## Typography [#typography] `DocsBody` adds the `docs-typeset` class, which styles the Markdown content inside it: headings, paragraphs, lists, links, inline code, blockquotes, tables, images and keyboard keys. The styles are built from your theme tokens, and the CLI added them to your global stylesheet inside `@layer components`, so utility classes still override them. To keep an element and its children unstyled, add `not-docs-typeset`: ```mdx

``` The class name is docscn's own, so it doesn't clash with `prose` from `@tailwindcss/typography` or with shadcn/typeset if your project uses them. ## Code highlighting [#code-highlighting] Code blocks show Fumadocs MDX's default Shiki output, with light and dark themes. The `codeblock` component added the CSS that switches between them, plus the styles for [notations](https://shiki.style/packages/transformers) such as `// [!code highlight]`, `// [!code ++]`, `// [!code focus]` and line numbers. To change the Shiki themes, configure `rehypeCodeOptions` in Fumadocs MDX.