WritedocsWritedocs

Steps and Step

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code

Steps numbers its Steps and connects them with a line - for a procedure the reader follows in order. A step holds any content: text, code blocks, images, other components.

Write a page

Create an .mdx file, and list it in writedocs.json’s navigation.

Preview it

writedocs dev

Publish

Push your changes - the site is built and published from there.

<Steps>
  <Step title="Write a page">
    Create an `.mdx` file, and list it in `writedocs.json`'s navigation.
  </Step>
  <Step title="Preview it">
    ```bash
    writedocs dev
    ```
  </Step>
  <Step title="Publish">
    Push your changes - the site is built and published from there.
  </Step>
</Steps>

Icons

icon shows an icon in a step’s circle, in place of its number. The steps after it keep counting:

Sign up

Create an account.

Create a key

This is step 2, even though step 1 shows an icon.

Done

You’re ready to send requests.

<Steps>
  <Step title="Sign up" icon="user-plus">Create an account.</Step>
  <Step title="Create a key">This is step 2, even though step 1 shows an icon.</Step>
  <Step title="Done" icon="check">You're ready to send requests.</Step>
</Steps>

Starting at another number

stepNumber sets a step’s number, and the steps after it continue from there - for a procedure that continues after other content:

Deploy

Steps 1 to 3 were on the previous page.

Check the logs

This one is 5.

<Steps>
  <Step title="Deploy" stepNumber={4}>Steps 1 to 3 were on the previous page.</Step>
  <Step title="Check the logs">This one is 5.</Step>
</Steps>

Titles as headings

titleSize makes a step’s title a heading - h2 or h3 - bigger than the usual bold title, for steps that are each a section of their own:

Configure the webhook

Add your endpoint’s URL in the dashboard.

Verify the signature

Check the Acme-Signature header on every request.

<Steps>
  <Step title="Configure the webhook" titleSize="h3">...</Step>
  <Step title="Verify the signature" titleSize="h3">...</Step>
</Steps>

Without titles

A step’s title is optional:

Open the dashboard.
Click Settings.

Step props

title string

The step’s title, in bold above its content.

icon string

An icon in the step’s circle, in place of its number - any icon.

stepNumber number

The step’s number. The steps after it continue from it.

titleSize "p" | "h2" | "h3" default: p

h2 or h3 shows the title as a heading of that level, in place of bold text.

Steps has no props.