mintlify__docs/es/components/index.mdx

---
title: "Descripción general"
description: "Explora la biblioteca completa de componentes de Mintlify para maquetación, énfasis, documentación de API y navegación en tus páginas MDX."
keywords:
  ["Componentes MDX", "componentes de documentación", "componentes de UI", "componentes"]
boost: 3
---

Mintlify proporciona componentes MDX integrados para tus páginas de documentación. Usa estos componentes para estructurar el contenido, llamar la atención sobre información importante, documentar APIs y orientar la navegación.

<div id="structure-your-content">
  ## Estructura tu contenido
</div>

<Card title="Tabs" icon="folder" href="/es/components/tabs">
  Organiza contenido relacionado en vistas con pestañas intercambiables.
</Card>

<Card title="Grupos de código" icon="code" href="/es/components/code-groups">
  Muestra ejemplos de código en varios lenguajes de programación.
</Card>

<Card title="Pasos" icon="list-ordered" href="/es/components/steps">
  Muestra instrucciones secuenciales en un formato numerado.
</Card>

<Card title="Columnas" icon="columns-3" href="/es/components/columns">
  Organiza contenido en paralelo en diseños adaptables.
</Card>

<Card title="Panel" icon="panel-right" href="/es/components/panel">
  Crea paneles laterales para contenido complementario.
</Card>

<div id="draw-attention">
  ## Llama la atención
</div>

<Card title="Callouts" icon="message-square-warning" href="/es/components/callouts">
  Destaca información importante con alertas con estilo.
</Card>

<Card title="Banner" icon="flag" href="/es/components/banner">
  Muestra anuncios destacados en la parte superior de las páginas.
</Card>

<Card title="Badge" icon="award" href="/es/components/badge">
  Añade etiquetas en línea e indicadores de estado.
</Card>

<Card title="Update" icon="bell" href="/es/components/update">
  Resalta contenido nuevo o actualizado.
</Card>

<Card title="Frames" icon="frame" href="/es/components/frames">
  Añade bordes y estilo a las imágenes y al contenido.
</Card>

<Card title="Tooltips" icon="message-circle" href="/es/components/tooltips">
  Muestra información adicional al pasar el cursor por encima.
</Card>

<div id="showcase-ai-prompts">
  ## Prompts de IA destacados
</div>

<Card title="Prompt" icon="sparkles" href="/es/components/prompt">
  Muestra prompts de IA que se pueden copiar con integración con Cursor.
</Card>

<div id="show-and-hide-content">
  ## Mostrar y ocultar contenido
</div>

<Card title="Acordeones" icon="chevron-down" href="/es/components/accordions">
  Secciones expandibles para mostrar contenido de forma progresiva.
</Card>

<Card title="Expandibles" icon="chevrons-down" href="/es/components/expandables">
  Mostrar y ocultar contenido detallado bajo demanda.
</Card>

<Card title="Vista" icon="eye" href="/es/components/view">
  Mostrar contenido de forma condicional según el contexto.
</Card>

<Card title="MDX" icon="braces" href="/es/components/mdx">
  Renderiza Markdown dentro de expresiones y condicionales JSX.
</Card>

<Card title="Visibility" icon="eye-off" href="/es/components/visibility">
  Controla el contenido mostrado a humanos frente a agentes de IA.
</Card>

<div id="document-your-api">
  ## Documenta tu API
</div>

<Card title="Campos" icon="text-cursor-input" href="/es/components/fields">
  Muestra las definiciones de parámetros y propiedades.
</Card>

<Card title="Respuestas" icon="arrow-left-right" href="/es/components/responses">
  Documenta las estructuras de respuestas de la API y sus campos.
</Card>

<Card title="Ejemplos" icon="file-code" href="/es/components/examples">
  Muestra ejemplos de solicitudes y respuestas en paralelo.
</Card>

<div id="link-to-other-pages">
  ## Vincular a otras páginas
</div>

<Card title="Cards" icon="square" href="/es/components/cards">
  Destaca el contenido con contenedores e iconos personalizables.
</Card>

<Card title="Tiles" icon="layout-grid" href="/es/components/tiles">
  Muestra el contenido en una cuadrícula de mosaicos en los que se puede hacer clic.
</Card>

<div id="add-visual-context">
  ## Añade contexto visual
</div>

<Card title="Iconos" icon="smile" href="/es/components/icons">
  Añade indicadores visuales usando la biblioteca de iconos Lucide.
</Card>

<Card title="Diagramas Mermaid" icon="git-branch" href="/es/components/mermaid-diagrams">
  Crea diagramas de flujo, diagramas de secuencia y más.
</Card>

<Card title="Color" icon="palette" href="/es/components/color">
  Muestra muestras de color con valores hex.
</Card>

<Card title="Tree" icon="folder-tree" href="/es/components/tree">
  Muestra estructuras jerárquicas de archivos y carpetas.
</Card>

<Card title="GitHub" icon="github" href="/es/components/github">
  Incrusta una tarjeta de repositorio de GitHub con estrellas y forks en vivo.
</Card>

<div id="style-components">
  ## Aplica estilos a los componentes
</div>

Todos los componentes integrados aceptan una prop `className`. Mintlify combina tus clases con los estilos propios del componente, de modo que puedes cambiar el estilo de una sola instancia sin envolverla en marcado adicional ni escribir una sobrescritura de CSS.

```mdx className example
<Note className="mt-0">This callout has no top margin.</Note>
```

Usa clases de [Tailwind CSS](/es/customize/custom-scripts#style-with-tailwind-css), incluidos los [valores arbitrarios](/es/customize/custom-scripts#arbitrary-values-and-variants) como `w-[350px]`, o nombres de clase que definas en un [archivo CSS personalizado](/es/customize/custom-scripts#add-custom-css).

[Banner](/es/components/banner), [MDX](/es/components/mdx) y [Visibility](/es/components/visibility) no aceptan `className`. El banner se configura en `docs.json`, y los otros dos renderizan sus hijos sin un elemento contenedor.