### Example MDX Content

Source: https://www.fumadocs.dev/docs/manual-installation/next

An example MDX file to be placed in the content/docs folder.

```markdown
---
title: Hello World
---

## Introduction

I love Anime.
```

--------------------------------

### NPM Commands Example

Source: https://www.fumadocs.dev/docs/markdown

Example of generating NPM installation commands.

```npm
npm i next -D
```

--------------------------------

### Create your first MDX file

Source: https://www.fumadocs.dev/docs

Example of an MDX file.

```mdx
---
title: Hello World
---

## Yo what's up
```

--------------------------------

### Example Document

Source: https://www.fumadocs.dev/docs/manual-installation/react-router

An example of a basic MDX document.

```mdx
---
title: Hello World
---

I love Fumadocs
```

--------------------------------

### Automatic Installation

Source: https://www.fumadocs.dev/docs

Command to create a new Fumadocs app.

```bash
npm create fumadocs-app
```

--------------------------------

### Meta Collection

Source: https://www.fumadocs.dev/docs/mdx

Transform YAML/JSON files into an array of data.

```typescript
import { defineCollections } from 'fumadocs-mdx/config';

export const test = defineCollections({
  type: 'meta',
  dir: 'content/docs',
});
```

--------------------------------

### Docs Collection

Source: https://www.fumadocs.dev/docs/mdx

Combination of `meta` and `doc` collections, which is needed for Fumadocs.

```typescript
import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
  docs: {
    // options for `doc` collection
  },
  meta: {
    // options for `meta` collection
  },
});
```

--------------------------------

### Install package using npm

Source: https://www.fumadocs.dev/docs/headless/mdx/install

Example command to install a package using npm.

```bash
npm install my-package
```

--------------------------------

### Setup an import alias (recommended)

Source: https://www.fumadocs.dev/docs/manual-installation/next

Configure tsconfig.json for import aliases.

```json
{
  "compilerOptions": {
    "paths": {
      "collections/*": ["./.source/*"]
    }
  }
}
```

--------------------------------

### cURL Request Example

Source: https://www.fumadocs.dev/docs/openapi/authentication/getToken

Example of how to request a token using cURL.

```curl
curl -X POST "https://example.com/auth/token" \
  -H "Content-Type: application/json" \
  -d '{    "email": "marc@scalar.com",    "password": "i-love-scalar"  }'
```

--------------------------------

### Install fumadocs-ui and fumadocs-core

Source: https://www.fumadocs.dev/docs/manual-installation/next

Install UI and core packages for Fumadocs.

```bash
npm i fumadocs-ui fumadocs-core
```

--------------------------------

### Static Mode Setup (Next.js)

Source: https://www.fumadocs.dev/docs/headless/search/orama

Example of using `staticGET` for static site generation.

```typescript
import { source } from '@/lib/source';
import { createFromSource } from 'fumadocs-core/search/server';

// statically cached
export const revalidate = false;
export const { staticGET: GET } = createFromSource(source);

```

--------------------------------

### Install fumadocs-core

Source: https://www.fumadocs.dev/docs/headless

Install the fumadocs-core package using npm.

```bash
npm install fumadocs-core
```

--------------------------------

### Translations Setup

Source: https://www.fumadocs.dev/docs/internationalization/tanstack-start

Define your translations and pass them to RootProvider.

```typescript
import { i18n } from '@/lib/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export const translations = i18n
  .translations()
  .extend(uiTranslations())
  .add('ui', {
    en: {
      displayName: 'English',
    },
    cn: {
      displayName: 'Chinese',
      search: '搜尋文檔',
    },
  });

export function baseOptions(locale: string): BaseLayoutProps {
  return {
    // different props based on `locale`
  };
}
```

```typescript
import { HeadContent, Scripts, useParams } from '@tanstack/react-router';
import * as React from 'react';
import { RootProvider } from 'fumadocs-ui/provider/tanstack';
import { i18nProvider } from 'fumadocs-ui/i18n';
import { translations } from '@/lib/layout.shared';

function RootDocument({ children }: { children: React.ReactNode }) {
  const { lang } = useParams({ strict: false });

  return (
    <html suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>
      <body className="flex flex-col min-h-screen">
        <RootProvider
          i18n={i18nProvider(translations, lang)}
        >
          {children}
        </RootProvider>
        <Scripts />
      </body>
    </html>
  );
}
```

--------------------------------

### Install fumadocs-mdx, fumadocs-core, and @types/mdx

Source: https://www.fumadocs.dev/docs/manual-installation/next

Install the necessary packages for using Fumadocs MDX.

```bash
npm i fumadocs-mdx fumadocs-core @types/mdx
```

--------------------------------

### Successful Response Example

Source: https://www.fumadocs.dev/docs/openapi/authentication/getToken

Example of a successful JSON response containing an authentication token.

```json
{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
}
```

--------------------------------

### src/routes/docs/$.tsx (Tanstack Start Example)

Source: https://www.fumadocs.dev/docs/integrations/content/local-md

Example of using `local-md` in a non-RSC setup with Tanstack Router, involving server payload and client-side rendering.

```typescript
import { createFileRoute, notFound } from '@tanstack/react-router';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { createServerFn } from '@tanstack/react-start';
import { getSource } from '@/lib/source';
import { DocsBody, DocsPage } from 'fumadocs-ui/layouts/docs/page';
import { useFumadocsLoader } from 'fumadocs-core/source/client';
import { useMemo } from 'react';
import { useMDXComponents } from '@/components/mdx';
import { rendererFromSerialized } from '@fumadocs/local-md/client';

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    const slugs = params._splat?.split('/') ?? [];
    return serverLoader({ data: slugs });
  },
});

const serverLoader = createServerFn({
  method: 'GET',
})
  .inputValidator((slugs: string[]) => slugs)
  .handler(async ({ data: slugs }) => {
    const source = await getSource();
    const page = source.getPage(slugs);
    if (!page) throw notFound();

    // compile
    const { serialize } = await page.data.load();

    return {
      frontmatter: page.data.frontmatter,
      // pass it to payload
      render: serialize(),
      // ...
    };
  });

function Page() {
  const { pageTree, frontmatter, render } = useFumadocsLoader(Route.useLoaderData());
  // render under sync mode
  const renderer = useMemo(() => rendererFromSerialized(render), [render]);
  const { body, toc } = renderer.renderSync(useMDXComponents());

  return (
    <DocsLayout tree={pageTree}>
      <DocsPage toc={toc}>
        {/* ... */}
        <DocsBody>{body}</DocsBody>
      </DocsPage>
    </DocsLayout>
  );
}
```

--------------------------------

### Install locally

Source: https://www.fumadocs.dev/docs/cli/preview

Install fumadocs-preview locally as a development dependency.

```bash
npm install fumadocs-preview -D
```

--------------------------------

### RTL Layout Setup

Source: https://www.fumadocs.dev/docs/ui/theme

Example of setting up RTL layout by adding the 'dir="rtl"' prop to the body and RootProvider.

```typescript
import { RootProvider } from 'fumadocs-ui/provider/<framework>';
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body dir="rtl">
        <RootProvider dir="rtl">{children}</RootProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Installation

Source: https://www.fumadocs.dev/docs/manual-installation/react-router

Install the necessary packages using npm.

```bash
npm i fumadocs-core fumadocs-ui
```

--------------------------------

### cURL Example

Source: https://www.fumadocs.dev/docs/openapi/authentication/getMe

Example of how to call the /me endpoint using cURL.

```shell
curl -X GET "https://example.com/me"
```

--------------------------------

### Root Component Setup

Source: https://www.fumadocs.dev/docs/manual-installation/tanstack-start

Wrap your entire app under Fumadocs providers in the root component.

```typescript
import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router';
import * as React from 'react';
import { RootProvider } from 'fumadocs-ui/provider/tanstack';

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  );
}

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>
      <body className="flex flex-col min-h-screen">
        <RootProvider>{children}</RootProvider>
        <Scripts />
      </body>
    </html>
  );
}
```

--------------------------------

### Create code blocks with package-install language

Source: https://www.fumadocs.dev/docs/headless/mdx/install

Example of creating code blocks using the 'package-install' language identifier.

```markdown
```package-install
my-package
```
```

```markdown
```package-install
npm i my-package -D
```
```

--------------------------------

### Doc Collection

Source: https://www.fumadocs.dev/docs/mdx

Compile Markdown & MDX files into a React Server Component, with useful properties like Table of Contents.

```typescript
import { defineCollections } from 'fumadocs-mdx/config';

export const test = defineCollections({
  type: 'doc',
  dir: 'content/docs',
});
```

--------------------------------

### Install Dependencies

Source: https://www.fumadocs.dev/docs/markdown/math

Install the necessary remark-math and rehype-katex packages.

```bash
npm install remark-math rehype-katex katex
```

--------------------------------

### Install create-fumadocs-app

Source: https://www.fumadocs.dev/docs/cli/create-fumadocs-app

Install the create-fumadocs-app package using npm.

```bash
npm install create-fumadocs-app
```

--------------------------------

### Tanstack Start

Source: https://www.fumadocs.dev/docs/mdx/entry/browser

The examples are for non-RSC usage, we recommend using RSC whenever possible for best client-side performance (avoiding hydration).

```typescript
import { createFileRoute, notFound } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import { source } from '@/lib/source';
import browserCollections from 'collections/browser';

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    const data = await loader({ data: params._splat?.split('/') ?? [] });
    await clientLoader.preload(data.path);
    return data;
  },
});

const loader = createServerFn({
  method: 'GET',
})
  .inputValidator((slugs: string[]) => slugs)
  .handler(async ({ data: slugs }) => {
    const page = source.getPage(slugs);
    if (!page) throw notFound();

    return {
      path: page.path,
    };
  });

const clientLoader = browserCollections.docs.createClientLoader({
  component({ frontmatter, default: MDX }) {
    return (
      <div className="prose">
        <h1>{frontmatter.title}</h1>
        <MDX />
      </div>
    );
  },
});

function Page() {
  const data = Route.useLoaderData();

  return clientLoader.useContent(data.path);
}
```

--------------------------------

### Installation

Source: https://www.fumadocs.dev/docs/integrations/og/takumi

Install the Takumi image response package.

```bash
npm install @takumi-rs/image-response
```

--------------------------------

### Custom Media Adapter Example

Source: https://www.fumadocs.dev/docs/integrations/openapi/api-page

An example of creating a custom media adapter for `application/json` to handle encoding and generating code examples for different languages.

```ts
import type { MediaAdapter } from 'fumadocs-openapi';

export const mediaAdapters: Record<string, MediaAdapter> = {
  // example: custom `application/json
  'application/json': {
    encode(data) {
      return JSON.stringify(data.body);
    },
    // returns code that inits a `body` variable, used for request body
    generateExample(data, ctx) {
      if (ctx.lang === 'js') {
        return `const body = "hello world"`;
      }

      if (ctx.lang === 'python') {
        return `body = "hello world"`;
      }

      if (ctx.lang === 'go' && 'addImport' in ctx) {
        ctx.addImport('strings');

        return `body := strings.NewReader("hello world")`;
      }
    },
  },
};
```

--------------------------------

### cURL Example

Source: https://www.fumadocs.dev/docs/openapi/planets/createPlanet

Example of how to create a planet using cURL.

```shell
curl -X POST "https://example.com/planets" \
  -H "Content-Type: application/json" \
  -d '{    "name": "Mars"  }'
```

--------------------------------

### MDX Components Setup

Source: https://www.fumadocs.dev/docs/ui/components/codeblock

Example of how to set up MDX components in `components/mdx.tsx` to use the CodeBlock.

```typescript
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultComponents,
    // HTML `ref` attribute conflicts with `forwardRef`
    pre: ({ ref: _ref, ...props }) => (
      <CodeBlock {...props}>
        <Pre>{props.children}</Pre>
      </CodeBlock>
    ),
    ...components,
  } satisfies MDXComponents;
```

--------------------------------

### Post Install Script

Source: https://www.fumadocs.dev/docs/mdx/typegen

Example of how to add `fumadocs-mdx` to the `postinstall` script in `package.json` to ensure types are generated when initializing the project.

```json
{
  "scripts": {
    "postinstall": "fumadocs-mdx"
  }
}
```

--------------------------------

### Install FlexSearch

Source: https://www.fumadocs.dev/docs/headless/search/flexsearch

Install FlexSearch via npm.

```bash
npm install flexsearch
```

--------------------------------

### cURL Example

Source: https://www.fumadocs.dev/docs/openapi/celestial-bodies/createCelestialBody

Example of how to create a celestial body using cURL.

```shell
curl -X POST "https://galaxy.scalar.com/celestial-bodies" \
  -H "Authorization: Bearer " \
  -H "Content-Type: application/json" \
  -d '{    "name": "Mars"  }'
```

--------------------------------

### Steps Usage Example

Source: https://www.fumadocs.dev/docs/ui/components/steps

Example of how to use the Steps and Step components in MDX.

```mdx
import { Step, Steps } from 'fumadocs-ui/components/steps';

<Steps>
<Step>

### Hello World

</Step>

<Step>

### Hello World

</Step>
</Steps>
```

--------------------------------

### Using MDX as a Page in Next.js

Source: https://www.fumadocs.dev/docs/mdx/entry/import

Example of using an MDX file as a page in the Next.js app directory, including layout and component setup.

```mdx
---
title: My Page
---

export { default } from '@/components/layouts/page';

# Hello World

This is my page.
```

--------------------------------

### Example Request: Create a celestial body

Source: https://www.fumadocs.dev/docs/openapi/planets/newplanet

Example of a POST request to create a new planet.

```json
{
  "name": "Tatooine",
  "description": "A desert planet in the Outer Rim",
  "type": "terrestrial",
  "habitabilityIndex": 0.3,
  "discoveredAt": "1977-05-25T00:00:00Z",
  "image": "https://example.com/tatooine.jpg",
  "satellites": [
    {
      "name": "Tatoo I"
    },
    {
      "name": "Tatoo II"
    }
  ],
  "creator": {
    "name": "Luke Skywalker"
  },
  "tags": [
    "desert",
    "twin suns"
  ],
  "successCallbackUrl": "https://example.com/success",
  "failureCallbackUrl": "https://example.com/failure"
}
```

--------------------------------

### Install fumadocs-obsidian

Source: https://www.fumadocs.dev/docs/integrations/obsidian

Install the fumadocs-obsidian package using npm.

```bash
npm i fumadocs-obsidian
```

--------------------------------

### Navigation Link Example

Source: https://www.fumadocs.dev/docs/internationalization/tanstack-start

Use the `useParams` hook to get the locale from URL for navigation.

```typescript
import { Link, useParams } from '@tanstack/react-router';

const { lang } = useParams({ from: '/$lang/' });

<Link
  to="/$lang/docs/$"
  params={{
    lang,
    _splat: '',
  }}
>
  Open Docs
</Link>;
```

--------------------------------

### Install Feedback Module

Source: https://www.fumadocs.dev/docs/integrations/feedback

Install the feedback module using Fumadocs CLI.

```bash
npx @fumadocs/cli@latest add feedback
```

--------------------------------

### Sidebar Enabled Example

Source: https://www.fumadocs.dev/docs/ui/layouts/docs

Example of enabling the sidebar.

```typescript
import { DocsLayout } from 'fumadocs-ui/layouts/docs';

<DocsLayout
  sidebar={{
    enabled: true,
  }}
/>;
```

--------------------------------

### Installation CLI

Source: https://www.fumadocs.dev/docs/ui/components/graph-view

Install the graph-view component using the Fumadocs CLI.

```bash
npx @fumadocs/cli add graph-view
```

--------------------------------

### Install the package

Source: https://www.fumadocs.dev/docs/integrations/story/vite

Install the Fumadocs Story package using npm.

```bash
npm i @fumadocs/story
```

--------------------------------

### Run the app in development mode

Source: https://www.fumadocs.dev/docs

Command to run the app in development mode.

```bash
npm run dev
```

--------------------------------

### Install fumadocs-typescript

Source: https://www.fumadocs.dev/docs/integrations/typescript

Install the fumadocs-typescript package using npm.

```bash
npm install fumadocs-typescript
```

--------------------------------

### Install Steps Component

Source: https://www.fumadocs.dev/docs/ui/components/steps

Install the steps component to your codebase using the Fumadocs CLI.

```bash
npx @fumadocs/cli@latest add steps
```

--------------------------------

### Install fumadocs-python

Source: https://www.fumadocs.dev/docs/integrations/python

Install the fumadocs-python package using npm.

```bash
npm install fumadocs-python shiki
```

--------------------------------

### Example

Source: https://www.fumadocs.dev/docs/headless/components/toc

A complete example demonstrating how to use the TOC components with dynamic data and custom styling.

```jsx
import { AnchorProvider, ScrollProvider, TOCItem, type TOCItemType } from 'fumadocs-core/toc';
import { type ReactNode, useRef } from 'react';

export function Page({ items, children }: { items: TOCItemType[]; children: ReactNode }) {
  const viewRef = useRef<HTMLDivElement>(null);

  return (
    <AnchorProvider toc={items}>
      <div ref={viewRef} className="overflow-auto">
        <ScrollProvider containerRef={viewRef}>
          {items.map((item) => (
            <TOCItem key={item.url} href={item.url}>
              {item.title}
            </TOCItem>
          ))}
        </ScrollProvider>
      </div>
      {children}
    </AnchorProvider>
  );
}
```

--------------------------------

### Install fumadocs-epub

Source: https://www.fumadocs.dev/docs/guides/export-epub

Install the EPUB export package using npm.

```bash
npm install fumadocs-epub
```

--------------------------------

### Get a planet (cURL)

Source: https://www.fumadocs.dev/docs/openapi/planets/getPlanet

Example cURL request to retrieve a planet by its ID.

```shell
curl -X GET "https://galaxy.scalar.com/planets/1"
```

--------------------------------

### cURL Example

Source: https://www.fumadocs.dev/docs/openapi/planets/uploadImage

Example of how to upload an image to a planet using cURL.

```curl
curl -X POST "https://galaxy.scalar.com/planets/1/image" \
  -H "Authorization: Bearer "
```

--------------------------------

### Install the required packages

Source: https://www.fumadocs.dev/docs/integrations/openapi

Install the necessary packages for OpenAPI integration.

```bash
npm i fumadocs-openapi shiki
```

--------------------------------

### Install Python command

Source: https://www.fumadocs.dev/docs/integrations/python

Install the Python command-line tool using pip.

```bash
pip install ./node_modules/fumadocs-python
```

--------------------------------

### Example Output

Source: https://www.fumadocs.dev/docs/cli

An example of the generated file tree output for Fumadocs UI.

```tsx
import { File, Folder, Files } from 'fumadocs-ui/components/files';

export default (
  <Files>
    <Folder name="app">
      <File name="layout.tsx" />
      <File name="page.tsx" />
      <File name="global.css" />
    </Folder>
    <Folder name="components">
      <File name="button.tsx" />
      <File name="tabs.tsx" />
      <File name="dialog.tsx" />
    </Folder>
    <File name="package.json" />
  </Files>
);
```

--------------------------------

### Steps Component Example

Source: https://www.fumadocs.dev/docs/markdown

Example of using the 'step' directive for denoting steps.

```markdown
### Installation [step]

### Write Code [step]

### Deploy [step]
```

--------------------------------

### Relative Link Example Usage

Source: https://www.fumadocs.dev/docs/ui/components

Example of how a relative link would look in markdown.

```markdown
[My Link](./file.mdx)
```

--------------------------------

### Initialize config file

Source: https://www.fumadocs.dev/docs/cli/preview

Initialize the configuration file for fumadocs-preview.

```bash
npx fumadocs-preview init
```

--------------------------------

### Too Many Requests Error Response Example

Source: https://www.fumadocs.dev/docs/openapi/authentication/getToken

Example of a JSON response for a too many requests error.

```json
{
  "type": "https://example.com/errors/too-many-requests",
  "title": "Too Many Requests",
  "status": 429,
  "detail": "Rate limit exceeded. Please try again later."
}
```

--------------------------------

### Bad Request Error Response Example

Source: https://www.fumadocs.dev/docs/openapi/authentication/getToken

Example of a JSON response for a bad request error.

```json
{
  "type": "https://example.com/errors/bad-request",
  "title": "Bad Request",
  "status": 400,
  "detail": "The request was invalid."
}
```

--------------------------------

### Install remark-directive

Source: https://www.fumadocs.dev/docs/headless/mdx/remark-admonition

Install the remark-directive package using npm.

```bash
npm i remark-directive
```

--------------------------------

### Update imports after installing component

Source: https://www.fumadocs.dev/docs/guides/customize-ui

Example of updating imports to use locally installed component types.

```typescript
import type { DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
import type { DocsLayoutProps } from '@/components/layout/docs';
```

--------------------------------

### Install the package

Source: https://www.fumadocs.dev/docs/integrations/content/local-md

Installs the necessary packages for local markdown content integration.

```bash
npm install @fumadocs/local-md shiki
```

--------------------------------

### Multilingual Translation Setup

Source: https://www.fumadocs.dev/docs/ui/translations

Example for defining translations across multiple languages, integrating with a standard i18n setup and adding namespace translations.

```typescript
import {
  defineTranslations,
} from 'fumadocs-core/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';
import { i18n } from '@/lib/i18n';

export const translations = i18n
  .translations()
  .extend(uiTranslations())
  // add translations to "ui" namespace
  .add('ui', {
    // [locale code]: { translations }
    cn: {
      search: '搜尋文檔',
    },
  });

```

--------------------------------

### Bad CSS example

Source: https://www.fumadocs.dev/docs/guides/customize-ui

An example of CSS styling to avoid due to its invasive nature.

```css
/* avoid targeting elements like this! */
[data-toc-popover] > div {
  background-color: purple;
}
```

--------------------------------

### Install Accordion Component

Source: https://www.fumadocs.dev/docs/ui/components/accordion

Install the Accordion component to your codebase using the Fumadocs CLI.

```bash
npx @fumadocs/cli@latest add accordion
```

--------------------------------

### Install FlexSearch Types

Source: https://www.fumadocs.dev/docs/headless/search/flexsearch

Install FlexSearch types for development via npm.

```bash
npm install @types/flexsearch -D
```

--------------------------------

### 200 OK Response

Source: https://www.fumadocs.dev/docs/openapi/authentication/getMe

Example JSON response for a successful request.

```json
{
  "id": 1,
  "name": "Marc"
}
```

--------------------------------

### Root Layout

Source: https://www.fumadocs.dev/docs/manual-installation/next

Wrap the application with Root Provider and add required styles.

```typescript
import { RootProvider } from 'fumadocs-ui/provider/next';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        // required styles
        className="flex flex-col min-h-screen"
      >
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Integrate with Fumadocs

Source: https://www.fumadocs.dev/docs/manual-installation/next

Create a lib/source.ts file to obtain Fumadocs source.

```typescript
import { docs } from 'collections/server';
import { loader } from 'fumadocs-core/source';

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

--------------------------------

### Install Base UI

Source: https://www.fumadocs.dev/docs/ui/component-library

You can opt-in to use Base UI by replacing `fumadocs-ui` with the `@fumadocs/base-ui` package.

```json
{
  "dependency": {
    "fumadocs-ui": "npm:@fumadocs/base-ui@latest"
  }
}
```

--------------------------------

### Successful Response Example

Source: https://www.fumadocs.dev/docs/openapi/celestial-bodies/createCelestialBody

Example of a successful response when creating a celestial body.

```json
{
  "id": 1,
  "name": "Mars",
  "description": "The red planet",
  "type": "terrestrial",
  "habitabilityIndex": 0.68,
  "physicalProperties": {
    "mass": 0.107,
    "radius": 0.532,
    "gravity": 0.378,
    "temperature": {
      "min": 130,
      "max": 308,
      "average": 210,
      "temperatureMetric1": 0.1,
      "temperatureMetric2": 0.1
    },
    "measurement1": 0.1,
    "measurement2": 0.1
  },
  "atmosphere": [
    {
      "compound": "CO2",
      "percentage": 95.3,
      "atmosphericData1": "string",
      "atmosphericData2": "string"
    }
  ],
  "discoveredAt": "1610-01-07T00:00:00Z",
  "image": "https://cdn.scalar.com/photos/mars.jpg",
  "satellites": [
    {
      "id": 1,
      "name": "Phobos",
      "description": "Phobos is the larger and innermost of the two moons of Mars.",
      "diameter": 22.2,
      "type": "moon",
      "orbit": {
        "planet": {
          "id": 1,
          "name": "Mars",
          "description": "The red planet",
          "type": "terrestrial",
          "habitabilityIndex": 0.68,
          "physicalProperties": {
            "mass": 0.107,
            "radius": 0.532,
            "gravity": 0.378,
            "temperature": {
              "min": 130,
              "max": 308,
              "average": 210,
              "temperatureMetric1": 0.1,
              "temperatureMetric2": 0.1
            },
            "measurement1": 0.1,
            "measurement2": 0.1
          },
          "atmosphere": [
            {
              "compound": "CO2",
              "percentage": 95.3,
              "atmosphericData1": "string",
              "atmosphericData2": "string"
            }
          ],
          "discoveredAt": "1610-01-07T00:00:00Z",
          "image": "https://cdn.scalar.com/photos/mars.jpg",
          "satellites": [],
          "creator": {
            "id": 1,
            "name": "Marc"
          },
          "tags": [
            "solar-system",
            "rocky",
            "explored"
          ],
          "lastUpdated": "2024-01-15T14:30:00Z",
          "successCallbackUrl": "https://example.com/webhook",
          "failureCallbackUrl": "https://example.com/webhook"
        },
        "orbitalPeriod": 0.319,
        "distance": 9376
      }
    }
  ],
  "creator": {
    "id": 1,
    "name": "Marc"
  },
  "tags": [
    "solar-system",
    "rocky",
    "explored"
  ],
  "lastUpdated": "2024-01-15T14:30:00Z",
  "successCallbackUrl": "https://example.com/webhook",
  "failureCallbackUrl": "https://example.com/webhook"
}
```

--------------------------------

### Setup from Source (Next.js)

Source: https://www.fumadocs.dev/docs/headless/search/orama

Create the server from source object.

```typescript
import { source } from '@/lib/source';
import { createFromSource } from 'fumadocs-core/search/server';

export const { GET } = createFromSource(source, {
  // https://docs.orama.com/docs/orama-js/supported-languages
  language: 'english',
});

```

--------------------------------

### 401 Unauthorized Error Response

Source: https://www.fumadocs.dev/docs/openapi/authentication/getMe

Example JSON response when the user is not authorized.

```json
{
  "type": "https://example.com/errors/not-found",
  "title": "Unauthorized",
  "status": 401,
  "detail": "You are not authorized to access this resource."
}
```

--------------------------------

### Shared Layout Options

Source: https://www.fumadocs.dev/docs/manual-installation/next

Create a lib/layout.shared.tsx file for shared layout options.

```typescript
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      title: 'My App',
    },
  };
}


```

--------------------------------

### Install Mixedbread CLI

Source: https://www.fumadocs.dev/docs/headless/search/mixedbread

Install the Mixedbread CLI globally for managing search stores.

```bash
npm install @mixedbread/cli -D
```

--------------------------------

### Next.js Framework Provider

Source: https://www.fumadocs.dev/docs/headless

Example of setting up the Next.js framework provider for Fumadocs Core components.

```tsx
import type { ReactNode } from 'react';
import { NextProvider } from 'fumadocs-core/framework/next';

export function RootLayout({ children }: { children: ReactNode }) {
  // or if you're using Fumadocs UI, use `<RootProvider />`
  return <NextProvider>{children}</NextProvider>;
}
```

--------------------------------

### Install Banner Component

Source: https://www.fumadocs.dev/docs/ui/components/banner

Install the banner component to your codebase using the Fumadocs CLI.

```bash
npx @fumadocs/cli@latest add banner
```

--------------------------------

### Install Dependencies

Source: https://www.fumadocs.dev/docs/headless/search/trieve

Install the necessary Trieve SDK and Fumadocs adapter packages using npm.

```bash
npm install trieve-ts-sdk trieve-fumadocs-adapter
```

--------------------------------

### 403 Forbidden Error Response

Source: https://www.fumadocs.dev/docs/openapi/authentication/getMe

Example JSON response when the user is forbidden from accessing the resource.

```json
{
  "type": "https://example.com/errors/forbidden",
  "title": "Forbidden",
  "status": 403,
  "detail": "You are not authorized to access this resource."
}
```

--------------------------------

### Add components

Source: https://www.fumadocs.dev/docs/cli

Selects and installs components using the CLI.

```bash
npx @fumadocs/cli add
```

--------------------------------

### Node.js Setup

Source: https://www.fumadocs.dev/docs/mdx/loader/node

Register the Node.js loader and access content.

```javascript
import { register } from 'fumadocs-mdx/node';

// register the Node.js loader
register();

// accessing content
const { source } = await import('./lib/source');
console.log(source.getPages());
```

--------------------------------

### Install Image Zoom Component

Source: https://www.fumadocs.dev/docs/ui/components/image-zoom

Install the image-zoom component to your codebase using the Fumadocs CLI.

```bash
npx @fumadocs/cli@latest add image-zoom
```

--------------------------------

### Singular Translation Setup

Source: https://www.fumadocs.dev/docs/ui/translations

Example of how to define and extend translations for a single language, including custom UI translations.

```typescript
import {
  defineTranslations,
} from 'fumadocs-core/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';

export const translations = defineTranslations()
  .extend(uiTranslations())
  // add translations to "ui" namespace
  .add('ui', {
    search: '搜尋文檔',
  });

```

--------------------------------

### APIPage Component

Source: https://www.fumadocs.dev/docs/integrations/openapi/api-page

The APIPage component is used to render OpenAPI docs content. This example shows its basic setup.

```tsx
import { openapi } from '@/lib/openapi';
import { createAPIPage } from 'fumadocs-openapi/ui';
import client from './api-page.client';

export const APIPage = createAPIPage(openapi, {
  client,
  // server config
});
```

--------------------------------

### Static Mode Server Setup (Next.js)

Source: https://www.fumadocs.dev/docs/headless/search/flexsearch

Configure the search server for static site generation using `staticGET` in Next.js.

```typescript
import { source } from '@/lib/source';
import { flexsearchFromSource } from 'fumadocs-core/search/flexsearch';

// statically cached
export const revalidate = false;
export const { staticGET: GET } = flexsearchFromSource(source);
```

--------------------------------

### Get LLM Text for OpenAPI Pages

Source: https://www.fumadocs.dev/docs/integrations/openapi/without-rsc

Example function to retrieve page content for LLMs, handling OpenAPI pages specifically.

```typescript
/**
 * return page content for LLMs
 */
export async function getLLMText(page: (typeof source)['$inferPage']) {
  if (page.type === 'openapi') {
    // e.g. return the stringified OpenAPI schema
    return JSON.stringify(page.data.getSchema().bundled, null, 2);
  }

  // your original flow below...
}
```

--------------------------------

### Run the command

Source: https://www.fumadocs.dev/docs/cli/preview

Run the command under your project directory to preview Markdown files.

```bash
npx fumadocs-preview dir/to/content
```

--------------------------------

### Turn `source` into a factory function.

Source: https://www.fumadocs.dev/docs/guides/access-control

This example shows a more complicated setup where `source` is a factory function, allowing for dynamic permission filtering.

```typescript
import { docs } from 'collections/server';
import { loader, update } from 'fumadocs-core/source';

// uncached, it's better to cache it in-memory for real use case.
export function createSource(permission: 'public' | 'admin') {
  const filteredSource = update(docs.toFumadocsSource())
    .files((files) =>
      files.filter((file) => {
        if (file.type === 'meta') return true;

        return file.data.permission === permission;
      }),
    )
    .build();

  return loader(filteredSource, {
    baseUrl: '/docs',
  });
}
```

--------------------------------

### Next.js + Dockerfile Example

Source: https://www.fumadocs.dev/docs/deploying

A Dockerfile snippet for deploying a Fumadocs app with Next.js, ensuring MDX configuration files are included.

```docker
# syntax=docker.io/docker/dockerfile:1

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* source.config.ts next.config.*

RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED=1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone .
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT=3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/config/next-config-js/output
ENV HOSTNAME="0.0.0.0"
CMD ["node", "server.js"]
```

--------------------------------

### Accessing Page Data

Source: https://www.fumadocs.dev/docs/headless/content-collections

Example of how to get a page and access its data, including MDX body, table of contents, and structured data for search.

```typescript
import { getPage } from '@/lib/source';

const page = getPage(slugs);

// MDX output
page?.data.body;

// Table of contents
page?.data.toc;

// Structured Data, for Search API
page?.data.structuredData;

```

--------------------------------

### Enable persistence with remarkInstall options

Source: https://www.fumadocs.dev/docs/headless/mdx/install

Configure remarkInstall with persistence options for Fumadocs UI.

```typescript
import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';

const remarkInstallOptions = {
  persist: {
    id: 'some-id',
  },
};

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [[remarkInstall, remarkInstallOptions]],
  },
});
```

--------------------------------

### Install fumadocs-docgen

Source: https://www.fumadocs.dev/docs/headless/mdx/install

Install the fumadocs-docgen package using npm.

```bash
npm install fumadocs-docgen
```

--------------------------------

### Mermaid Codeblock Example

Source: https://www.fumadocs.dev/docs/markdown/mermaid

Example of a mermaid codeblock.

```mermaid
graph TD;
  A-->B;
  A-->C;

```

--------------------------------

### Create Configuration File

Source: https://www.fumadocs.dev/docs/mdx/vite

Define the Fumadocs configuration, specifying the content directory.

```typescript
import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
});
```

--------------------------------

### Image Optimization Example

Source: https://www.fumadocs.dev/docs/mdx/performance

Demonstrates how Fumadocs MDX resolves images into static imports with Remark Image, optimizing them for React frameworks.

```mdx
# Image Optimization
Fumadocs MDX resolves images into static imports with Remark Image. Therefore, your images will be optimized automatically for your React framework (e.g. Next.js Image API).
```mdx
![Hello](./hello.png)

or in public folder

![Hello](/hello.png)
```

Yields:
```
import HelloImage from './hello.png';

<img alt="Hello" src={HelloImage} />
```
```

--------------------------------

### cURL

Source: https://www.fumadocs.dev/docs/openapi/planets/getAllData

Send a GET request to retrieve all planets.

```shell
curl -X GET "https://galaxy.scalar.com/planets"
```

--------------------------------

### Example Math Expressions

Source: https://www.fumadocs.dev/docs/markdown/math

Demonstrates how to write inline and block math expressions using TeX syntax.

```markdown
Inline: $$c = \pm\sqrt{a^2 + b^2}$$

```math
c = \pm\sqrt{a^2 + b^2}
```
```

--------------------------------

### Get Page

Source: https://www.fumadocs.dev/docs/headless/source-api

Get page with slugs.

```typescript
import { source } from '@/lib/source';

source.getPage(['slug', 'of', 'page']);

// with i18n
source.getPage(['slug', 'of', 'page'], 'locale');
```

--------------------------------

### Install Orama

Source: https://www.fumadocs.dev/docs/search/orama

Command to install the Orama package.

```bash
npm install @orama/orama

```

--------------------------------

### Tanstack Start Vite Configuration

Source: https://www.fumadocs.dev/docs/deploying/static

Vite configuration for Tanstack Start to enable SPA mode and pre-rendering for static site generation.

```typescript
import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    // ...other plugins
    tanstackStart({
      spa: {
        enabled: true,
        // Tanstack Router will automatically crawl your pages
        prerender: {
          enabled: true,
        },
        // if you have any hidden paths that's not visible on UI, you can add them explicitly.
        pages: [
          {
            path: '/docs/test',
          },
        ],
      },
    }),
  ],
});
```

--------------------------------

### Install Dependencies

Source: https://www.fumadocs.dev/docs/headless/search/algolia

Install the algoliasearch npm package.

```bash
npm install algoliasearch
```

--------------------------------

### Styles

Source: https://www.fumadocs.dev/docs/manual-installation/react-router

Add Fumadocs UI styles to your Tailwind CSS file.

```css
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
```

--------------------------------

### Install to your codebase

Source: https://www.fumadocs.dev/docs/ui/components/files

Easier customization & control.

```bash
npx @fumadocs/cli@latest add files
```

--------------------------------

### Translations Setup

Source: https://www.fumadocs.dev/docs/internationalization/next

Define your translations and pass them to RootProvider.

```typescript
import { i18n } from '@/lib/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export const i18nUI = i18n
  .translations()
  .extend(uiTranslations())
  .add('ui', {
    en: {
      displayName: 'English',
    },
    cn: {
      displayName: 'Chinese',
      search: '搜尋文檔',
    },
  });

export function baseOptions(locale: string): BaseLayoutProps {
  return {
    // different props based on `locale`
  };
}

```

```typescript
import { RootProvider } from 'fumadocs-ui/provider/next';
import { translations } from '@/lib/layout.shared';
import { i18nProvider } from 'fumadocs-ui/i18n';

export default async function RootLayout({
  params,
  children,
}: {
  params: Promise<{ lang: string }>;
  children: React.ReactNode;
}) {
  const lang = (await params).lang;

  return (
    <html lang={lang}>
      <body>
        <RootProvider
          i18n={i18nProvider(translations, lang)}
        >
          {children}
        </RootProvider>
      </body>
    </html>
  );
}

```

--------------------------------

### Example: With Imports

Source: https://www.fumadocs.dev/docs/headless/mdx/remark-image

Demonstrates how local and external images are handled when static imports are enabled.

```markdown
![Hello](/hello.png)
![Test](https://example.com/image.png)
```

--------------------------------

### cURL example

Source: https://www.fumadocs.dev/docs/openapi/planets/deletePlanet

Example of how to delete a planet using cURL.

```curl
curl -X DELETE "https://galaxy.scalar.com/planets/1" \  -H "Authorization: Bearer "
```

--------------------------------

### Example Input

Source: https://www.fumadocs.dev/docs/headless/mdx/remark-llms

Example markdown input with placeholders.

```markdown
# Getting started

<Callout type="tip">Hello **world**.</Callout>

Some paragraph.
```

--------------------------------

### MDX Components Setup

Source: https://www.fumadocs.dev/docs/mdx/entry/import

Configuration for providing MDX components, including Fumadocs UI defaults and custom components.

```tsx
import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultMdxComponents, // for Fumadocs UI
    ...components,
  } satisfies MDXComponents;
}

// export a `useMDXComponents()` that returns MDX components
export const useMDXComponents = getMDXComponents;
```

--------------------------------

### Styled Breadcrumb Example for Next.js

Source: https://www.fumadocs.dev/docs/headless/components/breadcrumb

A styled example for Next.js.

```typescript
'use client';
import { usePathname } from 'next/navigation';
import { useBreadcrumb } from 'fumadocs-core/breadcrumb';
import type { PageTree } from 'fumadocs-core/page-tree';
import { Fragment } from 'react';
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';

export function Breadcrumb({ tree }: { tree: PageTree.Root }) {
  const pathname = usePathname();
  const items = useBreadcrumb(pathname, tree);

  if (items.length === 0) return null;

  return (
    <div className="-mb-3 flex flex-row items-center gap-1 text-sm font-medium text-fd-muted-foreground">
      {items.map((item, i) => (
        <Fragment key={i}>
          {i !== 0 && <ChevronRight className="size-4 shrink-0 rtl:rotate-180" />}
          {item.url ? (
            <Link href={item.url} className="truncate hover:text-fd-accent-foreground">
              {item.name}
            </Link>
          ) : (
            <span className="truncate">{item.name}</span>
          )}
        </Fragment>
      ))}
    </div>
  );
}
```

--------------------------------

### Layout Component Example

Source: https://www.fumadocs.dev/docs/integrations/content/custom

Example of a layout component passing a custom page tree to DocsLayout.

```tsx
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      tree={
        {
          // your own tree
        }
      }
    >
      {children}
    </DocsLayout>
  );
}
```

--------------------------------

### Install Dependencies

Source: https://www.fumadocs.dev/docs/markdown/twoslash

Install the necessary packages for Twoslash integration.

```bash
npm install fumadocs-twoslash twoslash
```