---
title: Steps
description: Guías numeradas paso a paso para flujos de configuración, tutoriales y solución de problemas. Admite iconos, bloques de código y contenido anidado.
---

Usa Steps para guías claras y numeradas, como flujos de configuración y solución de problemas.

## Uso

```mdx
<Steps>
  <Step title="Install">Add the package.</Step>
  <Step title="Configure">Set your options.</Step>
  <Step title="Run">Start the build.</Step>
</Steps>
```

## Steps básicos

<Steps>
  <Step title="Instalar el paquete">
    ```bash
    npm install @jamdesk/cli
    ```
  </Step>
  <Step title="Inicializar tu proyecto">
    ```bash
    jamdesk init
    ```
  </Step>
  <Step title="Iniciar el servidor de desarrollo">
    ```bash
    jamdesk dev
    ```
  </Step>
</Steps>

````mdx
<Steps>
  <Step title="Install the package">
    ```bash
    npm install @jamdesk/cli
    ```
  </Step>
  <Step title="Initialize your project">
    ```bash
    jamdesk init
    ```
  </Step>
  <Step title="Start the dev server">
    ```bash
    jamdesk dev
    ```
  </Step>
</Steps>
````

## Steps sin títulos

Los Steps también funcionan sin títulos:

<Steps>
  <Step>
    Clona el repositorio desde GitHub.
  </Step>
  <Step>
    Instala las dependencias con `npm install`.
  </Step>
  <Step>
    Ejecuta el servidor de desarrollo.
  </Step>
</Steps>

```mdx
<Steps>
  <Step>
    Clone the repository from GitHub.
  </Step>
  <Step>
    Install dependencies with `npm install`.
  </Step>
  <Step>
    Run the development server.
  </Step>
</Steps>
```

## Contenido enriquecido en Steps

Cada step puede contener cualquier tipo de contenido:

<Steps>
  <Step title="Configura tu API">
    Crea un archivo de configuración:

    ```json config.json
    {
      "apiKey": "your-api-key",
      "endpoint": "https://api.example.com"
    }
    ```

    <Note>
    ¡Mantén tu clave de API en secreto! Nunca la incluyas en el control de versiones.
    </Note>
  </Step>
  <Step title="Realiza tu primera solicitud">
    Usa el SDK para realizar una solicitud:

    ```javascript
    const response = await client.getData();
    console.log(response);
    ```
  </Step>
</Steps>

## Steps con iconos

Usa iconos en lugar de números para mayor variedad visual:

<Steps>
  <Step title="Clonar el repositorio" icon="code-branch">
    Clona desde GitHub a tu máquina local.
  </Step>
  <Step title="Instalar dependencias" icon="download">
    Ejecuta el comando de instalación del gestor de paquetes.
  </Step>
  <Step title="Empezar a desarrollar" icon="rocket">
    Inicia el servidor de desarrollo.
  </Step>
</Steps>

```mdx
<Steps>
  <Step title="Clone the repository" icon="code-branch">
    Clone from GitHub to your local machine.
  </Step>
  <Step title="Install dependencies" icon="download">
    Run the package manager install command.
  </Step>
  <Step title="Start developing" icon="rocket">
    Launch the development server.
  </Step>
</Steps>
```

## Tamaño de título

Controla la jerarquía de encabezados con `titleSize` en el contenedor Steps:

<Steps titleSize="h3">
  <Step title="Primer paso">
    Este título se renderiza como un elemento h3.
  </Step>
  <Step title="Segundo paso">
    Útil para SEO y la estructura del documento.
  </Step>
</Steps>

```mdx
<Steps titleSize="h3">
  <Step title="First Step">
    This title renders as an h3 element.
  </Step>
  <Step title="Second Step">
    Useful for SEO and document structure.
  </Step>
</Steps>
```

## Props

### Steps

<ParamField name="titleSize" type="p | h2 | h3" default="p">
  Elemento de encabezado para los títulos de los steps.
</ParamField>

### Step

<ParamField name="title" type="string">
  Título opcional del step.
</ParamField>

<ParamField name="icon" type="string">
  Nombre del icono, URL o ruta (reemplaza el número del step).
</ParamField>

<ParamField name="iconType" type="solid | regular | light | thin | sharp-solid | duotone | brands" default="solid">
  Estilo de icono de Font Awesome.
</ParamField>

<ParamField name="titleSize" type="p | h2 | h3">
  Sobreescribe el titleSize del Steps padre. Hereda del padre si no se establece.
</ParamField>

<ParamField name="stepNumber" type="number">
  Establece manualmente el número del step (se asigna automáticamente si se omite).
</ParamField>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Descripción general de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>