Componentes MDX

Una biblioteca de componentes MDX personalizados disponibles en todas las páginas de documentación. Estos se registran automáticamente en el proceso de renderizado de los documentos.

Callout (Aviso)

Usa los “callouts” para resaltar información importante.

<Callout type="info" title="Información">
  Este es un aviso informativo.
</Callout>

<Callout type="warning" title="Advertencia">
  Ten cuidado con esta operación.
</Callout>

<Callout type="tip" title="Consejo">
  Aquí tienes una sugerencia útil.
</Callout>

Tipos: info, warning, tip, error

Badge (Insignia)

Muestra indicadores de versión o estado.

<Badge text="Nuevo" variant="success" />
<Badge text="Experimental" variant="warning" />
<Badge text="Obsoleto" variant="error" />

Props (Propiedades):

Propiedad	Tipo	Descripción
`text`	`string`	Etiqueta de la insignia
`variant`	`'success' \| 'warning' \| 'error' \| 'info'`	Variante de color

Steps (Pasos)

Envuelve listas ordenadas para mostrar instrucciones paso a paso.

<Steps>
1. **Primer paso**

   Descripción del primer paso.

2. **Segundo paso**

   Descripción del segundo paso.
</Steps>

FileTree (Árbol de Archivos)

Muestra estructuras de archivos y directorios.

<FileTree>
- src/
  - components/
  - pages/
    - index.astro
    - **[theme].astro**
- package.json
</FileTree>

Los elementos en negrita con ** aparecen resaltados. Usa - para los elementos de la lista.

CardGrid & LinkCard (Cuadrícula de Tarjetas y Tarjeta de Enlace)

Muestra tarjetas enlazadas en una cuadrícula responsiva.

<CardGrid>
  <LinkCard
    title="Empezando"
    description="Configura tu proyecto en minutos."
    href="/docs/es/getting-started/installation"
  />
  <LinkCard
    title="Temas"
    description="Aprende sobre el sistema de temas."
    href="/docs/es/core-concepts/theming"
  />
</CardGrid>

Props de LinkCard:

Propiedad	Tipo	Descripción
`title`	`string`	Título de la tarjeta
`description`	`string`	Descripción de la tarjeta
`href`	`string`	Destino del enlace

CodeTabs (Pestañas de Código)

Muestra bloques de código en pestañas para múltiples administradores de paquetes o lenguajes.

<CodeTabs labels={['pnpm', 'npm', 'yarn']}>
```bash
pnpm install
```
```bash
npm install
```
```bash
yarn install
```
</CodeTabs>

Props:

Propiedad	Tipo	Descripción
`labels`	`string[]`	Etiquetas de las pestañas que se muestran encima de cada bloque de código

ℹ️

Bloques de Código

Coloca cada bloque de código como un hijo directo. La cantidad de bloques de código debe coincidir con la cantidad de etiquetas.

PropsTable (Tabla de Propiedades)

Muestra la documentación de las propiedades (props) de un componente en una tabla formateada.

<PropsTable component="Hero" />

ApiMethod (Método API)

Documenta la firma de una función o método.

<ApiMethod name="useTranslations" params="locale: Locale" returns="(key: string) => string" />