---
title: Etapas
description: Guias numerados passo a passo para fluxos de configuração, tutoriais e solução de problemas, com suporte a ícones, blocos de código e conteúdo aninhado.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Use Steps para criar orientações claras e numeradas, como fluxos de configuração e solução 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>
```

## Etapas básicas

<Steps>
  <Step title="Instalar o pacote">
    ```bash
    npm install @jamdesk/cli
    ```
  </Step>
  <Step title="Inicializar seu projeto">
    ```bash
    jamdesk init
    ```
  </Step>
  <Step title="Iniciar o servidor de desenvolvimento">
    ```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>
````

## Etapas sem títulos

As etapas também funcionam sem títulos:

<Steps>
  <Step>
    Clone o repositório do GitHub.
  </Step>
  <Step>
    Instale as dependências com `npm install`.
  </Step>
  <Step>
    Execute o servidor de desenvolvimento.
  </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>
```

## Conteúdo avançado nas etapas

Cada etapa pode conter qualquer conteúdo:

<Steps>
  <Step title="Configurar sua API">
    Crie um arquivo de configuração:

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

    <Note>
    Mantenha sua chave de API em segredo! Nunca a confirme no sistema de controle de versão.
    </Note>
  </Step>
  <Step title="Fazer sua primeira solicitação">
    Use o SDK para fazer uma solicitação:

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

## Etapas com ícones

Use ícones em vez de números para obter variedade visual:

<Steps>
  <Step title="Clonar o repositório" icon="code-branch">
    Clone o repositório do GitHub para sua máquina local.
  </Step>
  <Step title="Instalar dependências" icon="download">
    Execute o comando de instalação do gerenciador de pacotes.
  </Step>
  <Step title="Começar a desenvolver" icon="rocket">
    Inicie o servidor de desenvolvimento.
  </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>
```

## Tamanho do título

Controle a hierarquia dos títulos com `titleSize` no contêiner Steps:

<Steps titleSize="h3">
  <Step title="Primeira etapa">
    Este título é renderizado como um elemento h3.
  </Step>
  <Step title="Segunda etapa">
    Útil para SEO e para a estrutura do 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>
```

## Propriedades

### Steps

<ParamField name="titleSize" type="p | h2 | h3" default="p">
  Elemento de título usado para os títulos das etapas.
</ParamField>

### Step

<ParamField name="title" type="string">
  Título opcional da etapa.
</ParamField>

<ParamField name="icon" type="string">
  Nome, URL ou caminho do ícone (substitui o número da etapa).
</ParamField>

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

<ParamField name="titleSize" type="p | h2 | h3">
  Substitui o titleSize do Steps pai. Herda o valor do pai se não for definido.
</ParamField>

<ParamField name="stepNumber" type="number">
  Define manualmente o número da etapa (atribuído automaticamente se omitido).
</ParamField>

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Visão geral dos componentes" icon="puzzle-piece" href="/pt/components/overview">
    Consulte todos os componentes disponíveis
  </Card>
  <Card title="Noções básicas de MDX" icon="file-code" href="/pt/content/mdx-basics">
    Saiba como usar componentes em MDX
  </Card>
</Columns>