Skip to main content

Stepper

Stepper blocks display sequential steps with numbered indicators and connecting lines.

Basic Example

1

Install Dependencies

First, install the required dependencies using npm or yarn:

npm install docusaurus-plugin-gitbook
2

Configure the Plugin

Add the plugin to your docusaurus.config.js:

export default {
plugins: ['docusaurus-plugin-gitbook'],
};
3

Start Using GitBook Syntax

You can now use GitBook syntax in your markdown files:

{% hint style="info" %}
Your content here
{% endhint %}
4

Build and Deploy

Build your site and deploy!

npm run build
npm run serve

Syntax

{% stepper %}
{% step %}
## Step Title
Step content here.
{% endstep %}

{% step %}
## Another Step
More content here.
{% endstep %}
{% endstepper %}

Use Cases

  • Installation guides
  • Tutorials
  • Onboarding flows
  • Process documentation