Steps
Numbered sequential steps for installation guides, tutorials, and multi-stage processes.
For isolated previews, theme switching, and sandbox editing, open the Steps playground on holydocs.com .
When to use
Use this component when you need stronger document structure, annotation, or narrative pacing inside a page.
Live Examples
Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.
Install / Configure / Deploy
Three-step setup guide.
Install the CLI
bashnpm install -g holydocs
Configure your project
Run holydocs init in your repo root and follow the prompts to connect your Git repository.
Deploy
Push to your main branch — HolyDocs automatically builds and publishes your docs.
mdx<Steps> <Step title="Install the CLI"> ```bashnpm install -g holydocs ``` </Step> <Step title="Configure your project"> Run `holydocs init` in your repo root and follow the prompts to connect your Git repository. </Step> <Step title="Deploy"> Push to your main branch — HolyDocs automatically builds and publishes your docs. </Step></Steps>
Detailed
Two-step guide with descriptive content.
Create a Project
Go to your dashboard and click New Project. Choose a name and select your Git provider.
Connect Repository
Select the repository containing your documentation. HolyDocs will detect your docs.json config automatically.
mdx<Steps><Step title="Create a Project">Go to your dashboard and click **New Project**. Choose a name and select your Git provider.</Step><Step title="Connect Repository">Select the repository containing your documentation. HolyDocs will detect your `docs.json` config automatically.</Step></Steps>
Props
This component has no configurable props. Use its child content to shape the output.
Usage
Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.
mdx<Steps> <Step title="Install the CLI"> ```bashnpm install -g holydocs ``` </Step> <Step title="Configure your project"> Run `holydocs init` in your repo root and follow the prompts to connect your Git repository. </Step> <Step title="Deploy"> Push to your main branch — HolyDocs automatically builds and publishes your docs. </Step></Steps>
Tips
- Keep the surrounding copy short so the component remains the focal point instead of becoming redundant chrome.
- Prefer one clear job per component instance. If a block is trying to explain, navigate, and warn at the same time, split it up.
- Check the page in both light and dark mode when you stack multiple content components together. Dense compositions can feel heavier than expected.
Related Components
Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.
More
- Interactive playground: Steps on holydocs.com
- Component library index: /components