# Steps

> Guide readers step-by-step using the Steps component.

Source: https://docs.doccupine.com/steps

> For the complete documentation index, see [llms.txt](https://docs.doccupine.com/llms.txt).

# Steps

Guide readers step-by-step using the Steps component.

The Steps component is perfect for organizing procedures or workflows in a clear sequence. Include as many individual steps as necessary to outline your process.

## Steps Usage

You can use the `Steps` component to create a step-by-step guide. Each step is represented by a `Step` component, which includes a title and content.

```html
<Steps>
  <Step title="Step 1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </Step>
  <Step title="Step 2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </Step>
  <Step title="Step 3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </Step>
</Steps>
```

<Steps>
  <Step title="Step 1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </Step>
  <Step title="Step 2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </Step>
  <Step title="Step 3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </Step>
</Steps>

## Properties

<Field value="title" type="string">
  An optional title for the step. When omitted, the step renders without a title row.
</Field>

<Field value="icon" type="string">
  A [Lucide](https://lucide.dev/icons) icon name shown next to the step title.
</Field>

<Field value="children" type="node" required>
  The content of the step.
</Field>