---
id: "packages/active-ui/steps"
title: "Steps"
description: "A numbered procedure in a document, each step with its own heading and content, joined by a line."
url: "/packages/active-ui/steps"
locale: "en"
revision: "875126696d46dd3b"
---

# Steps

`Steps` lays out a procedure in a document: install this, then configure that. Each `Step` has a
numbered marker, a line to the next step, and your own heading and content. The
[Getting started](/packages/active-ui/getting-started) page of this site uses it. For the
progress of a flow with a current step, use a [Stepper](/packages/active-ui/stepper).

**Example: A procedure in three steps**

Client: Runs entirely in your browser. Source: `examples/ui/steps.tsx`.

```tsx
// apps/docs/examples/ui/steps.tsx
import {Step, Steps} from '@workspace/active-ui/components/composed/steps';

/**
 * A procedure in a document: numbered steps with their own heading and
 * content. The number comes from the list; the marker repeats it.
 */
export default function StepsExample() {
  return (
    <Steps className="w-full max-w-xl text-sm">
      <Step>
        <h3 className="mb-1 font-medium">Receive the package</h3>
        <p className="text-muted-foreground">
          Take the archive from the release and check its checksum.
        </p>
      </Step>
      <Step>
        <h3 className="mb-1 font-medium">Install it</h3>
        <p className="text-muted-foreground">
          Add it to your workspace and install the dependencies.
        </p>
      </Step>
      <Step>
        <h3 className="mb-1 font-medium">Import the styles</h3>
        <p className="text-muted-foreground">
          Import the package stylesheet once, in your root layout.
        </p>
      </Step>
    </Steps>
  );
}
```

## What the composition adds

- **A real ordered list**: an `<ol>` with an `<li>` per step, so the number is in the list. The
  visible marker is a CSS counter, hidden from assistive technology.
- **Your heading** at the level your page needs; the first child of a step loses its top margin,
  so the heading lines up with the marker, in running text too.
- The marker has the shape of the Stepper's, so both read as one family; it mirrors in a
  right-to-left layout.

## Usage

```tsx
import {Step, Steps} from '@workspace/active-ui/components/composed/steps';

<Steps>
  <Step>
    <h2>Receive the package</h2>
    <p>…</p>
  </Step>
  <Step>
    <h2>Install it</h2>
    <p>…</p>
  </Step>
</Steps>;
```

## API

**Steps**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

Steps has no props of its own.

**Step**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

Step has no props of its own.