Steps, tabs and code

Six components for procedures and code.

Steps and Step

titleSize"p" | "h2" | "h3" | "h4"default: p

Heading level for each step’s title. On Steps.

Steps children: Step only, at least two. A one-step sequence is not a sequence, and the check enforces it.

On Step:

titlestringrequired

The step’s heading.

idstring

Stable anchor for deep links.

iconicon

Icon beside the title.

stepNumbernumber

Overrides the automatically assigned number.

mdx

<Steps>
  <Step title="Install">Add the dependency.</Step>
  <Step title="Authenticate">Set your API key in the environment.</Step>
</Steps>

Keep fenced code blocks at the top level of the page rather than inside a <Step> — MDX parses fences differently inside JSX, which is a common source of confusing build failures. Use title plus prose in the step, and put the command below the list.

Tabs and Tab

syncbooleandefault: true

Selecting a tab selects the same-titled tab in every other group on the page. On Tabs.

defaultTabIndexnumberdefault: 0

Which tab starts selected. On Tabs.

Tabs children: Tab only, at least two.

On Tab:

titlestringrequired

The tab label.

idstring

Stable identifier.

iconicon

Icon in the label.

languagestring

Marks the tab as carrying code in this language.

sync defaults to on: a reader who picks Python once sees Python in every group further down the page. That is usually what you want — turn it off when tabs on the same page mean unrelated things.

CodeBlock

titlestring

Filename or label shown in the block’s header.

languagestring

Syntax highlighting language.

showLineNumbersbooleandefault: false

Renders line numbers.

startLinenumberdefault: 1

First line number when numbering is on.

maxLinesnumber

Scrolls beyond this height instead of growing.

wordWrapbooleandefault: false

Wraps long lines instead of scrolling horizontally.

highlightstring

Line range to emphasize, e.g. "3-5".

focusstring

Line range to focus, dimming the rest.

Children: inline content — the code itself.

A plain fenced code block is the right default. Reach for CodeBlock when you need a title, line numbers, or emphasis.

CodeGroup

dropdownbooleandefault: false

Renders the selector as a dropdown rather than a tab strip.

Children: CodeBlock only, at least one. Use it for one operation shown in several languages — the generated API pages use exactly this shape for their five HTTP snippets.