Componentes MDX

Boltdocs te permite registrar componentes React personalizados que están disponibles en cada archivo .mdx sin imports explícitos. Esto es perfecto para estilizar elementos Markdown predeterminados, introducir bloques de layout personalizados o usar componentes de terceros.

Usando Componentes Registrados

Una vez agregados a mdx-components.tsx, puedes usar estos componentes dentro de cualquier archivo .mdx sin importarlos:

---
title: Sample Page
---

# Welcome

This is a custom alert component:

<MyCustomAlert type="success">
  This alert is globally available!
</MyCustomAlert>

You can also use inline highlights:

This is <Highlight color="yellow">important text</Highlight>.

Sobreescribiendo Elementos Markdown Estándar

Puedes sobreescribir etiquetas Markdown estándar mapeando los nombres de etiquetas HTML a tus componentes React personalizados:

Por ejemplo, para envolver todas las tablas en un contenedor responsive personalizado:

export default {
  table: (props) => (
    <div style={{ overflowX: 'auto' }}>
      <table {...props} />
    </div>
  ),
}

Avanzado: Inyección a través de Plugins

Si estás desarrollando un plugin reutilizable, puedes inyectar componentes MDX usando la configuración components del plugin:

import type { BoltdocsPlugin } from 'boltdocs'

export default function myPlugin(): BoltdocsPlugin {
  return {
    name: 'my-plugin',
    components: {
      // Key: component name in MDX, Value: path to the module
      MyComponent: './src/components/MyComponent.tsx',
    },
  }
}

Consulta el Plugin Mermaid para un ejemplo real de inyección de componentes basada en plugins.

Jesús Alcalá

Last updated on October 18, 2026