Components
Use these blocks to keep docs consistent, skimmable, and easier to maintain.
Badge
Badges are registered globally, so you can use them in any .mdx file without importing them first.
Callout
Callouts are useful for highlighting guidance, risk, and key decisions.
Use info for extra context that helps readers move faster.
Use warning when skipping a step can lead to mistakes or downtime.
Use important for rules, conventions, and team-wide agreements.
Tabs
Tabs help you avoid repeating the same section structure when a page has parallel paths.
API
Put endpoint shape, auth rules, and response examples here.
Mermaid
Nextra supports Mermaid diagrams directly through a mermaid code block.
FAQ
The FAQ components are also registered globally for MDX pages.
Common questions
When should I use a badge?
Use badges for quick status signals such as draft, stable, internal, or deprecated.
When should I use tabs instead of separate pages?
Use tabs when the reader is solving one task but has multiple equivalent paths, such as API, CLI, or UI workflows.
Do Mermaid diagrams need extra packages in this project?
No. Nextra supports Mermaid code blocks out of the box.
Copy-paste starter
<Badge tone="success">Stable</Badge>
<Callout type="important">
Add key rules or non-obvious decisions here.
</Callout>
<Tabs items={['API', 'CLI']}>
<Tabs.Tab>API instructions</Tabs.Tab>
<Tabs.Tab>CLI instructions</Tabs.Tab>
</Tabs>
```mermaid
flowchart TD
A[Start] --> B[Write docs]
B --> C[Review]
```
<FAQ title="FAQ">
<FAQItem question="Can I use these globally?">
Yes, they are registered in mdx-components.js.
</FAQItem>
</FAQ>