Rafflesia

src/mdx-components.tsx decides what is available inside MDX. defaultMdxComponents from fumadocs-ui/mdx is spread in first, so every doc gets the built-ins without importing anything.

Callouts

<Callout title="Heads up">Body text.</Callout>

Heads up

Callouts take a type of info, warn, or error.

A warning

This is the warn variant.

Code blocks

Fenced blocks are highlighted by Shiki at build time, so there is no client-side highlighter to ship:

import { loader } from "fumadocs-core/source";
import { docs } from "collections/server";

export const source = loader({
  baseUrl: "/docs",
  source: docs.toFumadocsSource(),
});

Tables

Piece	Owns
`source.config.ts`	which directory holds the MDX
`src/lib/source.ts`	the base URL and page tree
`src/mdx-components.tsx`	what MDX can render

Adding your own

Pass anything into getMDXComponents and it becomes available unprefixed in every document:

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents,
    Badge,
    ...components,
  };
}