> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Pasos

> Crea procedimientos numerados paso a paso.

Usa pasos para mostrar una serie de acciones o eventos secuenciales. Puedes agregar tantos pasos como necesites.

<Steps>
  <Step title="Primer paso">
    Estas son instrucciones o contenido que solo corresponden al primer paso.
  </Step>

  <Step title="Segundo paso">
    Estas son instrucciones o contenido que solo corresponden al segundo paso.
  </Step>

  <Step title="Tercer paso">
    Estas son instrucciones o contenido que solo corresponden al tercer paso.
  </Step>
</Steps>

```mdx Steps example theme={null}
<Steps>
  <Step title="Primer Paso">
    Estas son instrucciones o contenido que solo corresponden al primer paso.
  </Step>
  <Step title="Segundo Paso">
    Estas son instrucciones o contenido que solo corresponden al segundo paso.
  </Step>
  <Step title="Tercer Paso">
    Estas son instrucciones o contenido que solo corresponden al tercer paso.
  </Step>
</Steps>
```

<div id="steps-properties">
  ## Propiedades de Steps
</div>

<ResponseField name="children" type="ReactElement<StepProps>[]" required>
  Una lista de componentes `Step`.
</ResponseField>

<ResponseField name="titleSize" type="string" default="p">
  El tamaño de los títulos de los pasos. Uno de `p`, `h2` y `h3`.
</ResponseField>

<div id="individual-step-properties">
  ## Propiedades individuales del paso
</div>

<ResponseField name="children" type="string | ReactNode" required>
  El contenido de un paso, ya sea texto sin formato o componentes.
</ResponseField>

<ResponseField name="icon" type="string">
  El icono que se mostrará.

  Opciones:

  * Nombre del [icono de Font Awesome](https://fontawesome.com/icons)
  * Nombre del [icono de Lucide](https://lucide.dev/icons)
  * Código SVG (compatible con JSX) envuelto entre llaves
  * URL a un icono alojado externamente
  * Ruta a un archivo de icono en tu proyecto

  Para iconos SVG personalizados:

  1. Convierte tu SVG usando el [convertidor SVGR](https://react-svgr.com/playground/).
  2. Pega tu código SVG en el campo de entrada de SVG.
  3. Copia el elemento completo `<svg>...</svg>` del campo de salida JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: `icon={<svg ...> ... </svg>}`.
  5. Ajusta `height` y `width` según sea necesario.
</ResponseField>

<ResponseField name="iconType" type="string">
  El estilo de icono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con iconos de Font Awesome.

  Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="title" type="string">
  El Título es el texto principal del paso y aparece junto al indicador.
</ResponseField>

<ResponseField name="stepNumber" type="number">
  El número del paso.
</ResponseField>

<ResponseField name="titleSize" type="string" default="p">
  El tamaño de los títulos del paso. Uno de: `p`, `h2` o `h3`.
</ResponseField>