/>
MDX UI
$ init
Steps

Steps

Numbered step-by-step guides with visual indicators

Installation

npx mdx-ui add steps

Usage

import { Steps, Step } from "@/components/mdx/steps";
 
<Steps>
  <Step>First step</Step>
  <Step>Second step</Step>
  <Step>Third step</Step>
</Steps>;

Examples

Basic Steps

Create a new Next.js project
Install the required dependencies
Configure your tailwind.config.ts
Start building!

Steps with Rich Content

You can include any content inside steps, including code blocks and lists.

Install dependencies

Run the following command:

npm install mdx-ui

Configure your project

Update your configuration files:

  • Add Tailwind CSS
  • Configure MDX
  • Set up TypeScript

Start developing

You're ready to go!

Props

Steps

PropTypeDefaultDescription
childrenReact.ReactNode-Step components
classNamestring-Additional CSS classes

Step

PropTypeDefaultDescription
childrenReact.ReactNode-The step content
classNamestring-Additional CSS classes
PreviousSpoiler
Nextsymbol browser