---
title: Descripción general de componentes
description: Componentes MDX para tarjetas, pestañas, acordeones, llamadas, grupos de código y más. Agrégalos a cualquier página.
---

Jamdesk incluye componentes MDX que puedes usar en cualquier página. Esta descripción general te ayuda a elegir el componente adecuado para tu contenido.

## Uso

Agrega componentes directamente en tu MDX:

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Launch your docs in minutes.
</Card>
```

## Componentes de diseño

<Columns cols={3}>
  <Card title="Card" icon="square" href="/es/components/card">
    Muestra contenido en tarjetas con borde
  </Card>
  <Card title="Tabs" icon="folder" href="/es/components/tabs">
    Organiza contenido en secciones con pestañas
  </Card>
  <Card title="Accordion" icon="chevron-down" href="/es/components/accordion">
    Secciones de contenido contraíbles
  </Card>
  <Card title="Steps" icon="list-ol" href="/es/components/steps">
    Guías paso a paso numeradas
  </Card>
  <Card title="Expandable" icon="expand" href="/es/components/expandable">
    Mostrar/ocultar contenido adicional
  </Card>
  <Card title="Frame" icon="image" href="/es/components/frame">
    Contenedor con estilo y leyenda
  </Card>
  <Card title="Panel" icon="sidebar" href="/es/components/panel">
    Contenido personalizado en la barra lateral
  </Card>
  <Card title="Tables" icon="table" href="/es/components/tables">
    Datos estructurados en filas y columnas
  </Card>
  <Card title="Tooltip" icon="message" href="/es/components/tooltip">
    Información contextual al pasar el cursor
  </Card>
</Columns>

## Componentes de llamada

<Columns cols={3}>
  <Card title="Note" icon="sticky-note" href="/es/components/callouts">
    Llamada de información general
  </Card>
  <Card title="Info" icon="circle-info" href="/es/components/callouts">
    Llamada de contexto útil
  </Card>
  <Card title="Warning" icon="triangle-exclamation" href="/es/components/callouts">
    Llamada de advertencia importante
  </Card>
  <Card title="Tip" icon="lightbulb" href="/es/components/callouts">
    Consejo profesional o sugerencia
  </Card>
  <Card title="Check" icon="circle-check" href="/es/components/callouts">
    Éxito o confirmación
  </Card>
  <Card title="Danger" icon="circle-xmark" href="/es/components/callouts">
    Llamada de advertencia crítica
  </Card>
</Columns>

## Componentes de código

<Columns cols={3}>
  <Card title="CodeGroup" icon="layer-group" href="/es/components/code-group">
    Ejemplos de código en pestañas
  </Card>
  <Card title="Mermaid" icon="diagram-project" href="/es/components/mermaid">
    Diagramas de flujo y diagramas
  </Card>
  <Card title="RequestExample" icon="arrow-right" href="/es/components/examples">
    Bloque de código de solicitud API
  </Card>
  <Card title="ResponseExample" icon="arrow-left" href="/es/components/examples">
    Bloque de código de respuesta API
  </Card>
</Columns>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Componente Card" icon="square" href="/es/components/card">
    Comienza con el componente de diseño más versátil
  </Card>
  <Card title="Bloques de código" icon="code" href="/es/content/code-blocks">
    Aprende sobre resaltado de sintaxis y funciones avanzadas de código
  </Card>
</Columns>