Steps

Adding steps to your docs

Historical Fumadocs template

Historical template documentation, retained for existing links. It is not current ClaudeSkills product guidance.

This article has no translation in the selected language. The English body is shown.

The navigation uses English labels. Article languages are shown separately; the interface is not a full translation of the documentation.

On this page

Usage

Put your steps into the Steps container.

import { Step, Steps } from 'fumadocs-ui/components/steps';

<Steps>
<Step>

### Hello World

</Step>

<Step>

### Hello World

</Step>
</Steps>

We recommend using Tailwind CSS utility classes directly on Tailwind CSS projects.

You can use the Tailwind CSS utilities without importing it.

<div className="fd-steps">
  <div className="fd-step" />
</div>

It supports adding step styles to only headings with arbitrary variants.

<div className='fd-steps [&_h3]:fd-step'>

### Hello World

</div>

You no longer need to use the step component anymore.