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. From there the sections below add step titles, indented follow-up paragraphs, and nested lists.

Quick Start

Drop an ordered list inside <Steps>. The component takes no configuration; the list is the whole input.

<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 becomes a step title. Indent the follow-up paragraph by three spaces and it stays inside that same step, under the title.

<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 sentences alone. 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: a CSS counter supplies the number, the theme's accent color fills the circle, the connector runs on every step except the last, and bold text at the start of a step becomes a block-level title.