Steps

<Steps>
<Step title="Install the package">
  Add Heyo Docs to your application.
</Step>
<Step title="Add content">
  Create your first MDX page.
</Step>
</Steps>

Steps presents an ordered process as a vertical timeline, and Step supplies each item. The component assigns consecutive numbers automatically, keeps the connecting line aligned with the markers, and supports rich content inside each step. This makes it suitable for setup guides where an instruction may need a command, callout, or explanation in addition to a title.

When to use it

Use Steps when order matters: installation, configuration, migration, deployment, onboarding, or an incident response flow. A numbered sequence makes dependencies clear and gives readers a visible sense of progress.

Each step may contain regular Markdown and other MDX components. Add a CodeBlock for a command, a Callout for a warning, or an Accordion for an optional detail. Keep one user goal per step; if a step becomes a full guide, link to that guide instead of making the sequence difficult to scan.

Only direct Step elements are numbered. If you need to maintain an externally defined sequence, give a particular step an explicit number. Explicit numbers change only their own marker; the surrounding automatically numbered steps retain their positional numbers.

Rich step content

1. 1

   Install the package

   Add the documentation runtime to the app.

   TerminalCopy

   bun add @heyo-sh/heyo-docs

2. 3

   Publish

   Deploy once the page builds successfully. This step intentionally carries an explicit number.

Turn onboarding into a guided flow

Because every step accepts MDX, you can make a compact setup sequence feel complete without sending a reader back and forth between several pages.

<Steps>
<Step title="Create a preview">
  Start the development server and open the local URL.

  <CodeBlock language="bash" title="Terminal">
    {"bun dev"}
  </CodeBlock>

</Step>
<Step title="Share it with reviewers">
  <Callout type="tip" title="Use one stable link">
    A single preview URL makes feedback easier to collect and compare.
  </Callout>
</Step>
<Step title="Publish with confidence">
  Confirm navigation, search, and metadata before deploying.
</Step>
</Steps>

Properties