Using Components

MDX components are available in every page without imports. This guide helps you pick the right one for each situation. For live examples of every component, see the Components section in the sidebar.

Highlighting information

Use callout components to draw attention to important content:

Note -- Helpful context that enhances understanding but is not required reading.

Info -- Neutral facts or supplementary details worth highlighting.

Tip -- Best practices, shortcuts, and recommendations.

Warning -- Important caveats, requirements, or common pitfalls.

Danger -- Critical warnings about data loss, security, or irreversible actions.

Check -- Success confirmations or completed steps.

Use the lightest callout that conveys the urgency. If everything is a warning, nothing is.

<Note>

Helpful context or supplementary information.

</Note>

<Warning>

Important caveats or requirements.

</Warning>

Linking to other pages

Component	When to use
`Card`	A single feature or destination with a title, icon, and optional link.
`Columns`	A responsive grid of cards (2, 3, or 4 columns). Wraps multiple `Card` children.

<Columns cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">

    Get up and running in minutes.

</Card>
  <Card title="Components" icon="puzzle-piece" href="/components/cards">

    See every built-in component.

</Card>
</Columns>

Showing alternatives or steps

Component	When to use
`Tabs` + `Tab`	Equal alternatives the reader chooses between (languages, platforms, OSes).
`AccordionGroup` + `Accordion`	Collapsed-by-default details (FAQs, advanced options, troubleshooting).
`Steps` + `Step`	A linear sequence the reader walks through in order.
`CodeGroup`	Multi-language code blocks side by side with a shared tab strip.

The decision is straightforward:

If readers do all the work, use Steps.
If they pick one path, use Tabs.
If most readers skip it, use AccordionGroup.

<Steps>
  <Step title="First">Do this first.</Step>
  <Step title="Second">Then do this.</Step>
</Steps>

Documenting APIs

Component	When to use
`ParamField`	A request parameter (path, query, header, body).
`ResponseField`	A response field in the return payload.
`RequestExample`	The request code samples panel.
`ResponseExample`	The response payload panel.

These components are designed for API reference pages. They render type badges, required indicators, and structured parameter lists.

Code blocks

Component	When to use
Fenced code block	A single code example with syntax highlighting.
Code block with title	A code example labeled with its filename.
`CodeGroup`	The same example in multiple languages, shown as tabs.

See Code Blocks for syntax and examples.

For the full component reference with every prop and variant, see the individual pages in the Components section of the sidebar.