--- title: Steps, tabs and code description: Sequences, alternatives, and code presentation. --- Six components for procedures and code. ## `Steps` and `Step` 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`: The step's heading. Stable anchor for deep links. Icon beside the title. Overrides the automatically assigned number. ```mdx Add the dependency. Set your API key in the environment. ``` Keep fenced code blocks at the top level of the page rather than inside a `` — 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` Selecting a tab selects the same-titled tab in every other group on the page. On `Tabs`. Which tab starts selected. On `Tabs`. **`Tabs` children: `Tab` only, at least two.** On `Tab`: The tab label. Stable identifier. Icon in the label. 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` Filename or label shown in the block's header. Syntax highlighting language. Renders line numbers. First line number when numbering is on. Scrolls beyond this height instead of growing. Wraps long lines instead of scrolling horizontally. Line range to emphasize, e.g. `"3-5"`. 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` 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.