Steps

Transform an ordered list into a visually structured step-by-step guide.

Usage

Wrap an ordered list inside the <Steps> component, as shown below:

mdx

<Steps>
1. We recommend starting a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run:
    ```terminal
    npx create-next-app@latest
    ```
1. On installation, you'll see the following prompts:
    ```terminal
    What is your project named? my-app
    Would you like to use TypeScript? No / Yes
    Would you like to use ESLint? No / Yes
    Would you like to use Tailwind CSS? No / Yes
    Would you like your code inside a `src/` directory? No / Yes
    Would you like to use App Router? (recommended) No / Yes
    Would you like to use Turbopack for `next dev`?  No / Yes
    Would you like to customize the import alias (`@/*` by default)? No / Yes
    What import alias would you like configured? @/*
    ```
1. After the prompts, `create-next-app` will create a folder with your project name and install the required dependencies.
</Steps>

The following shows how it is displayed:

We recommend starting a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run:
terminal
```
npx create-next-app@latest
```

On installation, you'll see the following prompts:

terminal

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.