Componentes MDX

Esta página contiene todos los componentes visuales disponibles para usar en documentos MDX, junto con ejemplos de uso.

Componentes Básicos

Enlaces

Los enlaces se renderizan automáticamente usando Next.js Link:

Listas

Listas ordenadas:

Primer elemento
Segundo elemento
Tercer elemento

Listas no ordenadas:

Elemento uno
Elemento dos
Elemento tres

Texto con formato

Puedes usar negrita, cursiva, y código inline.

Párrafos con clase lead

Este es un párrafo normal.

Este es un párrafo con la clase lead que se muestra más grande.

Botones

El componente Button puede usarse como enlace o como botón, y tiene varias variantes.

Como botón (sin href)

El componente Button también puede usarse como botón HTML cuando no se proporciona href. En ese caso, puedes pasar props de botón como onClick, type, etc.

<Button onClick={() => alert('¡Hola!')}>
  <>Botón con acción</>
</Button>

Nota: Los event handlers como onClick requieren que el componente sea un Client Component. En archivos MDX (Server Components), usa Button principalmente con href para navegación.

Código

Bloque de código simple

function saludar(nombre) {
  console.log(`Hola, ${nombre}!`);
}

saludar('Mundo');

Bloque de código con múltiples lenguajes (CodeGroup)

Ejemplo de API

GET

/v1/users

curl https://api.example.com/v1/users \
  -H "Authorization: Bearer {token}"

Bloque de código con tag y label

POST

/v1/messages

curl -X POST https://api.example.com/v1/messages \
  -H "Authorization: Bearer {token}" \
  -H "Content-Type: application/json" \
  -d '{"message": "Hola mundo"}'

Código inline

Puedes usar código inline como const x = 10 dentro del texto.

Títulos

Los títulos H2 y H3 tienen funcionalidad especial con anclas y etiquetas.

Título H2 simple

Título H2 Simple

Este es un título H2 normal que automáticamente genera un ancla.

Título H2 con tag

GET

Título con Tag

Este título incluye un tag en la parte superior.

Título H2 con label

/v1/endpoint

Título con Label

Este título incluye un label en la parte superior.

Título H2 con tag y label

POST/v1/messages

Título con Tag y Label

Este título incluye tanto un tag como un label.

Título H2 sin ancla

Título sin Ancla

Este título no tiene enlace de ancla.

Título H3

Título H3 Simple

Los títulos H3 también funcionan con anclas automáticas.

Notas

El componente Note se usa para mostrar información importante.

Esta es una nota informativa. Úsala para destacar información importante que el usuario debe conocer.

Puedes incluir formato y código dentro de las notas.

También puedes incluir múltiples párrafos.

Layouts

Row y Col

Los componentes Row y Col permiten crear layouts de dos columnas.

Esta es la columna izquierda. Puedes poner cualquier contenido aquí.

Lista de elementos
Más contenido
Y más

Esta es la columna derecha. Útil para mostrar código o ejemplos al lado de la documentación.

console.log('Ejemplo de código');

Col sticky

La columna derecha puede ser "sticky" para que se mantenga visible al hacer scroll.

Esta es una columna con mucho contenido que hará que la página sea larga.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Esta columna es "sticky" y se mantendrá visible mientras haces scroll.

// Este código permanecerá visible
function ejemplo() {
  return 'Hola';
}

Propiedades

Los componentes Properties y Property se usan para documentar propiedades de objetos o parámetros de API.

Lista de propiedades simple

Name
id
Type
string
Description
Identificador único del objeto.
Name
name
Type
string
Description
Nombre del objeto.
Name
created_at
Type
timestamp
Description
Fecha de creación en formato timestamp.
Name
is_active
Type
boolean
Description
Indica si el objeto está activo.

Propiedades con y sin tipo

Name
required_field
Type
string
Description
Campo requerido con tipo especificado.
Name
optional_field
Description
Campo opcional sin tipo especificado.
Name
nested_object
Type
object
Description
Objeto anidado que puede contener otras propiedades.

Cards y Grids

Componente Guides

El componente Guides muestra una cuadrícula de tarjetas simples con títulos, descripciones y botones de acción.

Guides

Authentication

Learn how to authenticate your API requests.

Pagination

Understand how to work with paginated responses.

Errors

Read about the different types of errors returned by the API.

Webhooks

Learn how to programmatically configure webhooks for your app.

Componente Resources

El componente Resources muestra tarjetas interactivas con iconos, efectos hover y patrones de fondo animados.

Resources

Contacts

Learn about the contact model and how to create, retrieve, update, delete, and list contacts.

Conversations

Learn about the conversation model and how to create, retrieve, update, delete, and list conversations.

Messages

Learn about the message model and how to create, retrieve, update, delete, and list messages.

Groups

Learn about the group model and how to create, retrieve, update, delete, and list groups.

Componente Libraries

El componente Libraries muestra una cuadrícula de elementos con logos, títulos, descripciones y botones.

Official libraries

PHP

A popular general-purpose scripting language that is especially suited to web development.

Ruby

A dynamic, open source programming language with a focus on simplicity and productivity.

Node.js

Node.js® is an open-source, cross-platform JavaScript runtime environment.

Python

Python is a programming language that lets you work quickly and integrate systems more effectively.

Go

An open-source programming language supported by Google with built-in concurrency.

Uso en MDX

Estos componentes se pueden usar directamente en archivos MDX:

// Guides
<Guides />

// Resources  
<Resources />

// Libraries
<Libraries />

Estos componentes están preconfigurados con datos de ejemplo. Para personalizarlos, necesitarás modificar los archivos de componentes en src/components/.

Feedback

Componente Feedback

El componente Feedback se muestra automáticamente al final de cada página (en el footer) y permite a los usuarios proporcionar retroalimentación sobre la página.

El componente incluye:

Botones "Yes" y "No" para feedback rápido
Animación de transición al enviar
Mensaje de agradecimiento después de enviar

El componente Feedback se incluye automáticamente en el wrapper de cada página MDX, por lo que no necesitas agregarlo manualmente. Se muestra en el footer de cada documento.

Ejemplo de Implementación

El componente se implementa así en el código:

export function Feedback() {
  let [submitted, setSubmitted] = useState(false)

  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    // Procesar feedback aquí
    setSubmitted(true)
  }

  return (
    <div className="relative h-8">
      {/* Formulario de feedback */}
      {/* Mensaje de agradecimiento */}
    </div>
  )
}

Anotaciones MDX

MDX soporta anotaciones especiales usando la sintaxis {{ }}.

Clase lead en párrafos

Este es un párrafo normal.

Este es un párrafo con clase lead que se muestra más grande.

Anotaciones en títulos

Los títulos pueden tener varias anotaciones:

{{ tag: 'GET' }} - Muestra un tag arriba del título
{{ label: '/v1/endpoint' }} - Muestra un label arriba del título
{{ anchor: false }} - Desactiva el enlace de ancla
{{ className: 'lead' }} - Aplica una clase CSS personalizada

Ejemplo combinado

POST/v1/users

Endpoint de ejemplo

Este título tiene tanto tag como label.

Ejemplos combinados

Documentación de API completa