Docscn

MDX components

The components for Fumadocs MDX content.

Installation

npx shadcn@latest add @docscn/mdx

Usage

Spread defaultMdxComponents into your MDX components:

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:

KeyRenders
preCodeBlock for Shiki output
CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger, CodeBlockTabCode tabs from tab="..." code blocks and ```npm blocks
h1–h6Heading with anchor links
aFumadocs Core's Link (Next.js Link for internal links)
imgNext.js Image
tableA horizontally scrollable table
Card, CardsCards
Callout, CalloutContainer, CalloutTitle, CalloutDescriptionCallouts

createRelativeLink resolves links to other MDX files ([Next](./next.mdx)) to their page URLs. It works in server components only:

<MDX components={getMDXComponents({ a: createRelativeLink(source, page) })} />

Theme switch

Switch between light, dark and system themes.

Code block

Code blocks and code tabs for Shiki output.