---
title: Passaggi
description: Guide numerate passo passo per configurazione, tutorial e risoluzione dei problemi. Supporta icone, blocchi di codice e contenuti nidificati.
---

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

Usa Steps per creare procedure guidate numerate e chiare, ad esempio per configurazione e risoluzione dei problemi.

## Utilizzo

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

## Passaggi di base

<Steps>
  <Step title="Installa il pacchetto">
    ```bash
    npm install @jamdesk/cli
    ```
  </Step>
  <Step title="Inizializza il progetto">
    ```bash
    jamdesk init
    ```
  </Step>
  <Step title="Avvia il server di sviluppo">
    ```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>
````

## Passaggi senza titoli

Steps funziona anche senza titoli:

<Steps>
  <Step>
    Clona il repository da GitHub.
  </Step>
  <Step>
    Installa le dipendenze con `npm install`.
  </Step>
  <Step>
    Avvia il server di sviluppo.
  </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>
```

## Contenuti avanzati nei passaggi

Ogni passaggio può contenere qualsiasi tipo di contenuto:

<Steps>
  <Step title="Configura la tua API">
    Crea un file di configurazione:

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

    <Note>
    Mantieni segreta la tua chiave API! Non eseguirne mai il commit nel controllo versione.
    </Note>
  </Step>
  <Step title="Effettua la tua prima richiesta">
    Usa l'SDK per effettuare una richiesta:

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

## Passaggi con icone

Usa le icone al posto dei numeri per una maggiore varietà visiva:

<Steps>
  <Step title="Clona il repository" icon="code-branch">
    Clona il repository da GitHub sul tuo computer.
  </Step>
  <Step title="Installa le dipendenze" icon="download">
    Esegui il comando di installazione del gestore di pacchetti.
  </Step>
  <Step title="Inizia a sviluppare" icon="rocket">
    Avvia il server di sviluppo.
  </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>
```

## Dimensione del titolo

Controlla la gerarchia delle intestazioni con `titleSize` nel contenitore Steps:

<Steps titleSize="h3">
  <Step title="Primo passaggio">
    Questo titolo viene visualizzato come elemento h3.
  </Step>
  <Step title="Secondo passaggio">
    Utile per la SEO e la struttura 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>
```

## Proprietà

### Steps

<ParamField name="titleSize" type="p | h2 | h3" default="p">
  Elemento di intestazione per i titoli dei passaggi.
</ParamField>

### Step

<ParamField name="title" type="string">
  Titolo del passaggio, facoltativo.
</ParamField>

<ParamField name="icon" type="string">
  Nome, URL o percorso dell'icona (sostituisce il numero del passaggio).
</ParamField>

<ParamField name="iconType" type="solid | regular | light | thin | sharp-solid | duotone | brands" default="solid">
  Stile dell'icona Font Awesome.
</ParamField>

<ParamField name="titleSize" type="p | h2 | h3">
  Sovrascrive il valore titleSize del contenitore Steps padre. Eredita il valore dal contenitore padre se non viene impostato.
</ParamField>

<ParamField name="stepNumber" type="number">
  Imposta manualmente il numero del passaggio (assegnato automaticamente se omesso).
</ParamField>

## Prossimi passi

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Consulta tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>