Fumadocs
Components

Steps

Adding steps to your docs

Buy Coffee

Some text here

Go to Office Some text here

Some text here

Have a meeting Some text here

Some text here

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.

Without imports

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>

Hello World

You no longer need to use the step component anymore.

Edit on GitHub

Previous

Root Toggle

Next

Tabs

On this page