Componentes

Tudo o que está registrado em components/mdx.tsx pode ser usado direto no MDX, sem import.

Bloco de código

```js title="hello.js"
console.log('Hello World');
```

hello.js

console.log('Hello World');

Cards

<Cards>
  <Card title="Fumadocs" href="https://fumadocs.dev" description="O framework de documentação." />
  <Card icon={<GitLabIcon className="text-[#FC6D26]" />} title="Repositório" href="https://gitlab.com/codeinloop/pages/fumadocs-gitlab-pages" />
</Cards>

Fumadocs

O framework de documentação.

Repositório

O código desta documentação, no GitLab.

Callouts

<Callout title="Dica">Texto informativo.</Callout>
<Callout type="warn" title="Atenção">Algo que costuma quebrar.</Callout>

Dica

Texto informativo.

Atenção

Algo que costuma quebrar.

Vídeo do YouTube

Componente próprio deste projeto, em components/youtube.tsx. Funciona no export estático porque é só um <iframe> com loading="lazy".

<YouTube id="FoGm2-U7TXU" title="Crie uma documentação bonita e moderna com FumaDocs" />

Crie uma documentação bonita e moderna com FumaDocs

Ícones

GitLabIcon, YouTubeIcon e BlogIcon vêm de components/icons.tsx e herdam a cor do texto, então aceitam classes do Tailwind:

<GitLabIcon className="inline size-5 text-[#FC6D26]" />
<YouTubeIcon className="inline size-5 text-[#FF0000]" />

Ícone na barra lateral

O lucideIconsPlugin (em lib/source.ts) resolve nomes de ícones do Lucide declarados no frontmatter:

---
title: Deploy no GitLab Pages
icon: Rocket
---

Registrando um componente novo

components/mdx.tsx

import defaultMdxComponents from 'fumadocs-ui/mdx';
import { YouTube } from '@/components/youtube';

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