<Steps />

Added in eventcatalog@2.7.14

The Steps component is a powerful tool for creating structured, sequential guides in EventCatalog. It's ideal for presenting step-by-step instructions, tutorials, or workflows, particularly when explaining processes, API integrations, or code implementations.

Key Features:

• Automatic Numbering: Steps are automatically numbered, providing clear sequence and structure.
• Flexible Content: Supports various content types including text, code snippets, and embedded components.

Use Cases:

• Walking users through setup procedures
• Explaining complex workflows
• Presenting API integration steps
• Showcasing code examples with explanations

Support

The <Steps/> component is supported in domains, services, and all messages.

Usage

Add Steps and Step component into your markdown of your page.

Example

---
# service frontmatter
---

The Inventory Service is a critical component of the system responsible for managing product stock levels, tracking inventory movements, and ensuring product availability. It interacts with other services to maintain accurate inventory records and supports operations such as order fulfillment, restocking, and inventory audits.

<Steps title="How to connect to Inventory Service">
  <Step title="Obtain API credentials">
    Request API credentials from the Inventory Service team.
  </Step>
  <Step title="Install the SDK">
    Run the following command in your project directory:
    ```bash
      npm install inventory-service-sdk
    ```_
  </Step>
  <Step title="Initialize the client">
  Use the following code to initialize the Inventory Service client:
  ```js
    const InventoryService = require('inventory-service-sdk');
    const client = new InventoryService.Client({
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
      apiUrl: 'https://api.inventoryservice.com/v1'
    });
  ```_
  </Step>
  <Step title="Make API calls">
  
  You can now use the client to make API calls. For example, to get all products:
  ```js
  client.getProducts()
    .then(products => console.log(products))
    .catch(error => console.error(error));
  ```_
  </Step>
</Steps>

Rendered example in EventCatalog

See example in the demo EventCatalog application.

Props (<Steps>)

Name	Type	Default	Description
title (optional)	string	(empty)	Title that gets renders above the steps

Props (<Step>)

Name	Type	Default	Description
title (required)	string	(empty)	Title for the step