Code Block

Display Shiki highlighted code blocks

Code blocks are rendered through the default MDX pre component.

hello.ts

export function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

config.js

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
};

export default config;

npm i fumadocs-core fumadocs-ui

Cards

Display linked content in a card layout

Dynamic Code Block

Runtime syntax highlighting with Shiki