Components

Available components for use in MDX documentation files.

All components listed here are available globally in MDX files — no imports needed.

Admonitions

Admonitions are callout blocks for highlighting important information. Each type has a distinct color and a default title that can be overridden with the title prop.

Note

Tip

Info

Warning

Danger

Admonition Syntax

<Note>
Default note with auto-generated title.
</Note>

<Warning title="Be Careful">
Warning with a custom title.
</Warning>

Color Reference

Tabs

Use <Tabs> and <TabItem> to create tabbed content panels. Useful for showing code in multiple languages or platform-specific instructions.

npm install zudo-doc

pnpm add zudo-doc

yarn add zudo-doc

Syntax

<Tabs>
  <TabItem label="npm" value="npm" default>
    Content for npm tab.
  </TabItem>
  <TabItem label="pnpm" value="pnpm">
    Content for pnpm tab.
  </TabItem>
</Tabs>

Props

Tabs:

TabItem:

Synced Tabs

Use groupId to sync tab selection across multiple tab groups on the same page:

<Tabs groupId="package-manager">
  <TabItem label="npm" default>npm install</TabItem>
  <TabItem label="pnpm">pnpm add</TabItem>
</Tabs>

<!-- This group syncs with the one above -->
<Tabs groupId="package-manager">
  <TabItem label="npm" default>npm run build</TabItem>
  <TabItem label="pnpm">pnpm build</TabItem>
</Tabs>

Details (Collapsible)

Use <Details> for collapsible content sections:

Syntax

<Details title="Optional Title">
Hidden content here.
</Details>

Math Equations

When math is enabled in settings (default: true), you can render mathematical equations using KaTeX.

Inline Math

Use single dollar signs for inline math: $E = mc^2$ renders as $E = mc^2$.

Block Math

Use double dollar signs for display math:

Syntax

Inline: $E = mc^2$

Block:
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

You can also use fenced code blocks with the math language:

```math
\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}
```

Mermaid Diagrams

Use fenced code blocks with the mermaid language to render diagrams. Mermaid is loaded on-demand — pages without mermaid blocks incur no overhead.

Flowchart

Sequence Diagram

Syntax

```mermaid
graph TD
  A --> B
  B --> C
```

See the Mermaid documentation for all supported diagram types.

Typography

The following standard Markdown/MDX elements are styled through the design token system.

Headings

Headings from h2 to h4 appear in the table of contents on the right sidebar.

Text Formatting

This is a regular paragraph. You can use bold text, italic text, and strikethrough text. You can also combine bold and italic together.

Inline Code

Use backticks for inline code: const x = 42 or pnpm dev.

Code Blocks

Fenced code blocks use Shiki for syntax highlighting with the active color scheme’s theme.

function greet(name: string): string {
  return `Hello, ${name}!`;
}

.container {
  display: flex;
  gap: 1rem;
  align-items: center;
}

---
title: Example Page
sidebar_position: 1
---

Content goes here with **Markdown** support.

Unordered Lists

• First item
• Second item
  • Nested item A
  • Nested item B
• Third item

Ordered Lists

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Blockquotes

This is a blockquote. It can contain formatted text and multiple paragraphs.

Second paragraph in the same blockquote.

Tables

Links

• Internal link: Writing Docs
• Internal link: Introduction

Horizontal Rules

Content above the rule.

Content below the rule.