--- title: Steps description: Walk readers through install and setup procedures with numbered steps. --- Use `` and `` to present a numbered sequence (installation guides, onboarding flows, or any procedure readers should follow in order). Each step shows an auto-incremented number in a circle, with an optional title and room for rich content underneath. Wrap one or more `` children inside ``. Add code blocks, callouts, lists, or other components inside each step. ```mdx Run `npm install` in your project root. Run `npm run dev`. ``` ## Example Install the package: ```bash npm install newpackage ``` The `newpackage` executable will be available in your terminal. Initialize configuration: ```bash newpackage configure --init ``` Callouts and other components work inside steps. Start your development server: ```bash newpackage dev --port 3000 ``` ````mdx Install the package: ```bash npm install newpackage ``` The `newpackage` executable will be available in your terminal. Initialize configuration: ```bash newpackage configure --init ``` Callouts and other components work inside steps. Start your development server: ```bash newpackage dev --port 3000 ``` ```` ## Properties ### `Steps` One or more `` elements. `` renders a list element with a CSS counter reset so step numbers start at 1. Standard `
    ` attributes such as `className` are forwarded to the list element. ### `Step` An optional heading rendered as an `

    ` above the step content. Use short, action-oriented titles such as **Install dependencies** or **Deploy to production**. Omit `title` when the step body is self-explanatory or you only need the step number for context. --- A [Font Awesome](/components/icon) icon slug that replaces the auto-incremented step number in the circle. Pass the slug without the `fa-` prefix, for example `icon="gear"` for a settings step. When `icon` is set, the step number is hidden for that step only; other steps without an icon continue numbering in sequence. ## Step without a title `title` is optional. Use a titleless step when the content speaks for itself or when you want a lighter visual hierarchy. ```bash npm create docs-page@latest my-docs ``` Open `docs.json` and add your first page to the `sidebar` array. ```bash npm run dev ``` ````mdx ```bash npm create docs-page@latest my-docs ``` Open `docs.json` and add your first page to the `sidebar` array. ```bash npm run dev ``` ```` ## When to use steps | Use steps when… | Consider alternatives when… | | --- | --- | | Readers must follow steps in order | Content is reference material with no sequence | | A tutorial or setup guide has 3+ stages | Options are parallel, not sequential; use [Tabs](/components/tabs) | | Each stage has its own code or callouts | Detail can stay hidden until needed; use [Accordion](/components/accordion) | ## Behavior | Condition | Result | | --- | --- | | Empty `` or no `` children | Renders an empty list | | `title` omitted on `` | Renders the step number and body content only | | `icon` set on `` | Replaces the step number with the icon for that step | | Mixed `icon` and numbered steps | Numbering continues for steps without an icon | | Nested content inside `` | Rendered in the step body | ## See also - [Components overview](/components): when to use steps, tabs, and accordions - [Icon](/components/icon): finding Font Awesome slugs for the `icon` property