Steps

Use steps to present a clear, sequential path. Each item auto-numbers with a CSS counter, so you can drop steps into MDX without worrying about manual numbering.

1. Map the flow

   List the actions a reader should take.
2. Keep it scannable

   Short titles and concise copy make the sequence easy to follow.

3. Publish

   Ship once the flow feels solid.

<Steps>
  <Step title="Map the flow">List the actions a reader should take.</Step>
  <Step title="Keep it scannable">
    Short titles and concise copy make the sequence easy to follow.
  </Step>
  <Step title="Publish">Ship once the flow feels solid.</Step>
</Steps>

Title sizing

Set titleSize on the parent Steps component to apply a font size across all step titles: base, or any heading level (h1–h6). Badges and connectors resize automatically so alignment stays intact.

1. Large titles

   Pair big text with short copy.
2. Use sparingly

   Great for hero sections or key flows.

<Steps titleSize="h2">
  <Step title="Large titles">Pair big text with short copy.</Step>
  <Step title="Use sparingly">Great for hero sections or key flows.</Step>
</Steps>

Icons

Swap the badge number for an icon by passing a Lucide name string or a custom icon component. Numbering still respects order, so you can mix and match.

1. Pick an icon

   Use a Lucide name as a string.
2. Fit the context

   Icons use the same accent badge and spacing.

3. Ship it

   Keep every step consistent.

<Steps>
  <Step title="Pick an icon" icon="sparkles">Use a Lucide name as a string.</Step>
  <Step title="Fit the context" icon="wand">
    Icons use the same accent badge and spacing.
  </Step>
  <Step title="Ship it" icon="rocket">Keep every step consistent.</Step>
</Steps>