Escribir contenido

Cada componente de abajo está registrado en el renderizador de documentación en src/components/docs/mdx-components.ts — impórtalo al inicio de cualquier archivo .mdx y úsalo en línea. Son Astro + JS puro, resueltos por tokens, y tuyos para editar.

Pasos

Usa <Steps> con <Step title="…"> anidados para guías ordenadas. Los números y la línea conectora se dibujan con un contador CSS, así que reordenar renumera automáticamente.

1. Añade el import
   Importa Steps y Step al inicio de tu archivo MDX.
2. Envuelve tus acciones
   Cada <Step> se convierte en un elemento numerado.
3. Publica
   Sin JS de cliente, sin configuración.

<Steps>
  <Step title="Añade el import">…</Step>
  <Step title="Envuelve tus acciones">…</Step>
</Steps>

Grupos de tarjetas

<CardGroup cols={2|3|4}> coloca las tarjetas en una cuadrícula responsiva que colapsa a una columna en móvil. Combínalo con el átomo Card.

Código en pestañas

<CodeGroup> combina varios <CodeBlock> en un panel con pestañas. El filename de cada hijo se convierte en una pestaña — el patrón npm/pnpm/yarn, o curl/python/node para una API.

npm i astro-ignite

pnpm add astro-ignite

yarn add astro-ignite

Código resaltado

Los bloques de código admiten resaltado de líneas y marcadores de diff en tiempo de compilación (transformadores de Shiki — coste cero en cliente). Añade {1,3-5} tras el lenguaje, o anota las líneas en línea.

const config = {
  primary: 'var(--color-primary)', // resaltado
  border: 'var(--color-border)',
};

const before = 1; 
const after = 2; 

Marcos

<Frame caption="…"> centra y enmarca contenido multimedia para que las capturas y diagramas se vean intencionales. Coloca dentro un átomo Image o un <img> normal.