Built-in components

Dustavez includes MDX components for callouts, badges, steps, tabs, link grids, cards, file trees, buttons, and API endpoints. Import and use them directly in your content.

All components live in src/components/mdx/ and are imported directly in your .mdx files. No registration or configuration required.

Additional components are documented on their own pages: File tree, Cards, Link buttons, and Advanced components.

Callout

Styled aside boxes for notes, warnings, and tips.

Props: type ('note' | 'warning' | 'tip', default 'note'), title (optional, defaults to the type name).

<Callout type="tip" title="Pro tip">
  You can nest any MDX content inside a callout.
</Callout>

Badge

Inline label pills for status indicators.

Props: text (required), variant ('default' | 'success' | 'warning' | 'info', default 'default').

<Badge text="Stable" variant="success" />
<Badge text="Beta" variant="info" />
<Badge text="Deprecated" variant="warning" />

Steps and Step

Numbered step sequences for tutorials and guides.

Steps props: None (pure wrapper). Step props: num (required number), title (required string).

<Steps>
  <Step num={1} title="Install dependencies">
    Run `npm install` in the project root.
  </Step>
  <Step num={2} title="Start the dev server">
    Run `npm run dev` to launch at localhost:4321.
  </Step>
</Steps>

Tabs and Tab

Tabbed content panels for package managers, platforms, or language variants.

Tabs props: labels (required string array). Tab props: index (required number matching position in labels).

<Tabs labels={["npm", "pnpm", "yarn"]}>
  <Tab index={0}>
    ```sh
    npm install my-library
    ```
  </Tab>
  <Tab index={1}>
    ```sh
    pnpm add my-library
    ```
  </Tab>
  <Tab index={2}>
    ```sh
    yarn add my-library
    ```
  </Tab>
</Tabs>

npm install my-library

pnpm add my-library

yarn add my-library

LinkGrid

A responsive grid of linked cards with titles and descriptions.

Props: links (required array of { title: string, description: string, href: string }).

<LinkGrid links={[
  { title: "Installation", description: "Get up and running.", href: "/en/getting-started/installation" },
  { title: "Configuration", description: "Customize your site.", href: "/en/getting-started/configuration" },
]} />

ApiEndpoint

Formatted HTTP endpoint blocks with color-coded method badges.

Props: method ('GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE', required), path (required string), description (optional string).

<ApiEndpoint method="GET" path="/v1/documents/:id" description="Retrieve a document by ID.">
  Returns the full document object including metadata and content.
</ApiEndpoint>