> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Steps

Numbered sequential steps for installation guides, tutorials, and multi-stage processes.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Steps playground on holydocs.com](https://holydocs.com/components/steps).

## 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**

```bash
npm 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">
    ```bash
npm 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">
    ```bash
npm 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

**[Callout](/components/callout)**

Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.
**[Card](/components/card)**

Versatile content containers that can display titles, icons, descriptions, and optional links.
**[CardGroup](/components/card-group)**

Responsive grid container for laying out multiple cards in even columns.

## More

- Interactive playground: [Steps on holydocs.com](https://holydocs.com/components/steps)
- Component library index: [/components](/components)