# Steps

> Numbered steps for a docs procedure: a ringed counter beside each step and a hairline running from under it toward the next.

```ts
import { Steps } from "@sdxc/ui/docs";
```

Renders the ordered list and the heading scope its titles read. Each step pads its
own end instead of the list using a gap, so the rail spans the whole distance between
one counter and the next.

## Examples

```tsx
<Steps>
	<Steps.Item id="add-a-monitor" title={t("quickstart.add")}>{t("quickstart.add.body")}</Steps.Item>
	<Steps.Item title={t("quickstart.alerts")}>{t("quickstart.alerts.body")}</Steps.Item>
</Steps>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `level?` | `HeadingLevel` | Heading depth of every step title. Defaults to one level past the nearest `HeadingScope`, or `2` where no scope wraps the list. |
| `children` | `RemixNode` | Steps.Item children, numbered in order by CSS counters. |

Also accepts everything in `TagProps<"ol">`.


### Steps.Item

One step: the counter and rail in the inline-start gutter, the title heading beside the counter, and the step's content under the title.

| Prop | Type | Description |
| --- | --- | --- |
| `title` | `RemixNode` | What the reader does in this step, rendered as a heading. |
| `id?` | `string` | Id on the title heading, so a table of contents or a link can target the step. |
| `children?` | `RemixNode` | Instructions, commands and code for the step. |

Also accepts everything in `Omit<TagProps<"li">, "title" | "id">`.