> ## Documentation Index
> Fetch the complete documentation index at: https://smartac-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Pasos

> Crea procedimientos numerados paso a paso con el componente steps para guiar a los usuarios en tareas secuenciales, tutoriales y configuraciones.

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`, `h3` y `h4`.
</ResponseField>

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

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

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

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

  Opciones:

  * Nombre del ícono de [Font Awesome](https://fontawesome.com/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `fontawesome` en tu `docs.json`
  * Nombre del ícono de [Lucide](https://lucide.dev/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `lucide` en tu `docs.json`
  * Nombre del ícono de [Tabler](https://tabler.io/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `tabler` en tu `docs.json`
  * URL de un ícono alojado externamente
  * Ruta a un archivo de ícono en tu proyecto
  * Código SVG envuelto entre llaves

  Para íconos SVG personalizados:

  1. Convierte tu SVG con el [convertidor de 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 de 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 ícono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con íconos de Font Awesome.

  Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</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 de los paso. uno de `p`, `h2`, `h3` y `h4`.
</ResponseField>

<ResponseField name="id" type="string">
  Un ID personalizado para el paso, usado para enlaces de anclaje y la navegación de la tabla de contenido.
</ResponseField>

<ResponseField name="noAnchor" type="boolean" default="false">
  Si se debe ocultar el enlace de anclaje del paso.
</ResponseField>