Skip to main content
Docus combines the power of Markdown with Vue components using MDC (Markdown Components) syntax. This allows you to create rich, interactive documentation without writing complex HTML.

​
What is MDC?

MDC (Markdown Components) is a syntax extension that lets you use Vue components directly in Markdown files. It’s powered by @nuxt/content and provides a seamless way to enhance your documentation.
While Docus uses MDC syntax natively, this Mintlify documentation uses Mintlify’s component syntax shown throughout this page.

​
Callout Components

Docus provides several callout components to highlight important information:

​
Note

Use notes for additional information:
In Mintlify:
Here’s some additional information for you.

​
Tip

Use tips for helpful suggestions:
In Mintlify:
Here’s a helpful suggestion to improve your workflow.

​
Warning

Use warnings for cautionary information:
In Mintlify:
Be careful with this action as it might have unexpected results.

​
Caution

Use caution for critical warnings:
In Mintlify:
This action cannot be undone. Proceed with extreme caution.

​
Accordion Components

Create expandable sections to organize content and reduce visual clutter.

​
Single Accordion

Docus is a fully integrated documentation solution built with Nuxt UI. It’s a theme based on the UI documentation template that provides a ready-to-use visual interface. Users can focus on content using Markdown and MDC syntax.

​
Accordion Group

Docus is a fully integrated documentation solution built with Nuxt UI. It’s a theme based on the UI documentation template that provides a ready-to-use visual. Users can focus on content using Markdown and MDC syntax.
The only thing you need to start a Docus project is a content/ folder. You can check the starter template for a quick start.
Nuxt UI is a collection of premium Vue components, composables and utilities for building beautiful, responsive applications.

​
Tabs Component

Display content in tabbed interfaces for better organization:
This is the preview content. You can use Markdown and other components here.
::: ::

​
Steps Component

Create numbered step-by-step guides:
1

Install Docus

Create a new Docus project:
2

Start Development Server

Run the dev server:
3

Start Writing

Create your first page in the content/ directory and start writing your documentation!

​
Start Development Server

Run the dev server:
::
Docus supports all Iconify icons through the @iconify-json packages.

​
Badge Component

Add badges to highlight version numbers or status:
You can customize badge colors using props: ::badge{color="green"}New::

​
Field Components

Document API properties and parameters:
Field components are particularly useful for API documentation and configuration references.

​
Collapsible Component

Wrap content to make it collapsible:

​
Using Nuxt UI Components

Docus is built on Nuxt UI, which means you have access to all Nuxt UI components:
While you can use any Nuxt UI component, remember that they require Vue runtime and won’t work in static Markdown contexts.

​
Component Nesting

MDC supports nested components using colons to indicate nesting levels:
Each additional colon indicates one level deeper in the component hierarchy.

​
Best Practices

Choose the right component for your content. Use ::tip for helpful suggestions, ::warning for cautions, etc.
Avoid deeply nested components (more than 3 levels) as they become hard to read and maintain.
MDC components work seamlessly with regular Markdown. You can use bold, italic, and other formatting inside components.
Always test components like tabs and accordions to ensure they work correctly in your documentation.