Steps

Steps wraps an ordered list so each item renders as a numbered circle with a connector line running down to the next one. The last step drops its connector. Each example below shows the live component first, then the exact MDX that produced it.

Quick Start

Drop an ordered list inside <Steps> and you are done. There are no props to set.

<Steps>
 
1. Clone the repository.
2. Install dependencies.
3. Start the dev server.
 
</Steps>

Adding Options

Bold text at the start of a list item renders as a title above the rest of the step. Indent the follow-up paragraph by three spaces to keep it inside that same step.

<Steps>
 
1. **Clone the repository**
 
   Run `git clone` to copy the project files into a new folder.
 
2. **Install dependencies**
 
   Run `npm install` from the project root.
 
3. **Start the dev server**
 
   Run `npm run dev` and open the URL it prints.
 
</Steps>

Advanced

Steps carry nested content, not just sentences. Indented code fences and links both keep their styling inside a step. A nested ordered list gets the same treatment one level down, with its own circles and its numbering restarted at one, which is how step two below branches into two choices without breaking the outer count.

<Steps>
 
1. **Generate the environment file**
 
   ```bash
   bash scripts/setup-env.sh
   ```
 
2. **Pick an access mode**
 
   Set `ACCESS_MODE` in `.env.local`:
 
   1. `public` leaves every page open.
   2. `private` puts the login page in front of the site.
 
3. **Start the server**
 
   Run `npm run dev`, then read [Deployment](/getting-started/deployment) when
   you are ready to ship.
 
</Steps>

Options

Steps takes one prop.

There is no prop for the numbering style, the circle color, or the connector. Those come from the .steps-container rules in app/globals.css: the number is a CSS counter, the circle uses the theme's accent color, the connector is drawn on every step except the last, and bold text at the start of a step is promoted to a block-level title.