Components — docsmint

All components work in .mdx files without extra imports. Collapsible sections use native HTML.

Callout

Inline notices for notes, warnings, and tips.

<Callout>Default note.</Callout>
 
<Callout type="warning">This action cannot be undone.</Callout>
 
<Callout type="tip">Run docsmint clean to force a fresh reinstall.</Callout>

Note

This is a note. Use it for important context that doesn’t fit inline.

Warning

This action cannot be undone. Back up first.

Tip

Run docsmint clean if the dev server behaves unexpectedly after an upgrade.

Prop	Type	Default
`type`	`"note" \| "warning" \| "tip"`	`"note"`

Inline hover definitions. Renders a dotted underline — hover to reveal.

The <Tooltip tip="Batches user operations off-chain before submitting to the EntryPoint">bundler</Tooltip> collects transactions.

The bundler Batches user operations off-chain before submitting to the EntryPoint collects transactions.

Prop	Type	Required
`tip`	string	yes

FileTree

A collapsible file and directory tree. Folders collapse on click. Wrap filenames in ** to highlight them.

<FileTree>
- docs/
  - **docsmint.config.ts**
  - src/
    - content/
      - docs/
        - getting-started.md
</FileTree>

docs/
- docsmint.config.ts
- src/
  - content/
    - docs/
      - getting-started.md
      - configuration.md
    - writing/
      - hello-world.md

Two spaces per indent level. No props — content is the slot.

Tabs

Tabbed panels for showing alternatives side by side. labels must match the number of <Tab> children.

<Tabs labels={["pnpm", "npm", "pip"]}>
<Tab>
```bash
pnpm add package
```
</Tab>
<Tab>
```bash
npm install package
```
</Tab>
<Tab>
```bash
pip install package
```
</Tab>
</Tabs>

pnpm add docsmint

npm install docsmint

pip install docsmint

Prop	Type	Required
`labels`	`string[]`	yes

Mermaid

Render diagrams from Mermaid syntax. Supports flowcharts, sequence diagrams, entity-relationship diagrams, and more. Automatically adapts to the current theme.

<Mermaid code={`
flowchart LR
  A[Install docsmint] --> B[docsmint init]
  B --> C[Write markdown]
  C --> D[docsmint dev]
  D --> E[docsmint build]
  E --> F[Deploy]
`} />

Prop	Type	Required
`code`	string	yes

Image

Optimized images with optional captions.

<Image src={import('./arch.png')} alt="Architecture diagram" caption="System overview" />

Local images from src/assets/ are resized and converted to modern formats at build time. Images from public/ are served as-is with lazy loading.

Prop	Type	Required
`src`	`string \| ImageMetadata`	yes
`alt`	string	yes
`caption`	string	no
`width`	number	no
`height`	number	no

Collapsible sections

Native HTML:

<details>
<summary>Full benchmark output</summary>
 
```bash
read: IOPS=749k, BW=2925MiB/s
clat (usec): min=35, max=8371, avg=337.51
```
 
</details>

Full benchmark output

read: IOPS=749k, BW=2925MiB/s (3067MB/s)
clat (usec): min=35, max=8371, avg=337.51, stdev=27.76

Add open to start expanded.