Plandalf

Steps

Use numbered steps to teach setup flows one action at a time, with anchors, custom numbers, icons, and heading-size control.

Steps are for procedures where the reader should move in order. Use them for quickstarts, setup flows, launch checks, migration paths, and anything that should feel like a guided path instead of a wall of paragraphs.

Keep each step about one decision

A good step teaches one action, then lets the reader move on. Put optional detail in an Expandable or the next section instead of overloading the step body.

Basic steps

This is the Mintlify-compatible baseline: one Steps wrapper with ordered Step children.

  1. First Step

    These are instructions or content that only pertain to the first step.

  2. Second Step

    These are instructions or content that only pertain to the second step.

  3. Third Step

    These are instructions or content that only pertain to the third step.

<Steps>
  <Step title="First Step">
    These are instructions or content that only pertain to the first step.
  </Step>
  <Step title="Second Step">
    These are instructions or content that only pertain to the second step.
  </Step>
  <Step title="Third Step">
    These are instructions or content that only pertain to the third step.
  </Step>
</Steps>

Plandalf setup path

  1. Create a test offer

    Start with one offer that uses test mode, one product, and one price.

  2. Open checkout from one button

    Add a button to your site and connect it to the offer.

  3. Handle the result

    Redirect, unlock UI, or record analytics only after checkout returns a completed result.

Steps MDX

<Steps>
  <Step title="Create a test offer">
    Start with one offer that uses test mode, one product, and one price.
  </Step>
  <Step title="Open checkout from one button">
    Add a button to your site and connect it to the offer.
  </Step>
  <Step title="Handle the result">
    Redirect, unlock UI, or record analytics only after checkout completes.
  </Step>
</Steps>

Step markers

Use stepNumber when imported MDX continues from an earlier sequence, or icon when a step needs a visual state rather than a number.

  1. Continue from a previous guide

    The next automatic step becomes 5.

  2. Use an icon marker

    Icon steps are best for status summaries and short checklists.

  3. Hide the anchor

    Use noAnchor when the step is part of a short local pattern and should not appear as a direct target.

Steps properties

childrenReactElement<StepProps>[]required

A list of Step components.

titleSizestringdefault: p

The size of the step titles. One of p, h2, h3, and h4.

Individual step properties

titlestringrequired

The title is the primary text for the step and shows up next to the indicator.

childrenstring | ReactNode

The content of a step either as plain text or components.

iconstring

The icon to display. Use a shared icon name, a Lucide, Font Awesome, or Tabler name, an image path, an external URL, or inline SVG.

iconTypestring

The Font Awesome icon style. Options include regular, solid, light, thin, sharp-solid, duotone, and brands.

stepNumbernumber

The number of the step.

titleSizestringdefault: p

The size of the step title. One of p, h2, h3, and h4.

idstring

A custom ID for the step, used for anchor linking and table of contents navigation.

noAnchorbooleandefault: false

Whether to hide the anchor link for the step.

Plandalf extensions

variant"line" | "cards" | "compact"default: line

Chooses the visual treatment. Use line for Mintlify-style sequential docs, compact for short checklists, and cards only when every step needs a framed surface.

descriptionstring

Adds a short line of supporting text beneath the title.

Tabs and code groups Use switchers when the reader chooses a language, framework, or implementation style.
Cards and tiles Use linked surfaces for navigation and visual previews after the reader knows what they need.

Feature detail