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. 
::callout
This is a callout component using MDC syntax!
::
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: 
::note
Here's some additional information for you.
::
In Mintlify:
Here’s some additional information for you.

​
Tip

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

​
Warning

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

​
Caution

Use caution for critical warnings: 
::caution
This action cannot be undone.
::
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
  :::accordion-item{label="What is Docus?" icon="i-lucide-circle-help"}
  Docus is a fully integrated documentation solution built with Nuxt UI.
  :::
::

​
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.
::accordion
  :::accordion-item{label="What is Docus?" icon="i-lucide-circle-help"}
  Docus is a fully integrated documentation solution.
  :::
  
  :::accordion-item{label="How do I get started?" icon="i-lucide-circle-help"}
  Start with a `content/` folder.
  :::
::

​
Tabs Component

Display content in tabbed interfaces for better organization:
This is the preview content. You can use Markdown and other components here.
::tabs
  :::tabs-item{icon="i-lucide-eye" label="Preview"}
  This is the preview content.
  :::
  
  :::tabs-item{icon="i-lucide-code" label="Code"}
  ```typescript
  export default defineNuxtConfig({
    modules: ['@nuxt/ui']
  })
::: :: 

## Card Components

Highlight content or create visual groupings with cards.

### Card Group

<CardGroup cols={2}>
  <Card title="Dashboard" icon="github" href="https://github.com/nuxt-ui-templates/dashboard">
    A dashboard with multi-column layout and data visualization.
  </Card>
  <Card title="SaaS" icon="github" href="https://github.com/nuxt-ui-templates/saas">
    A template with landing, pricing, docs and blog sections.
  </Card>
  <Card title="Docs" icon="github" href="https://github.com/nuxt-ui-templates/docs">
    A documentation template with `@nuxt/content` integration.
  </Card>
  <Card title="Landing" icon="github" href="https://github.com/nuxt-ui-templates/landing">
    A landing page you can use as a starting point.
  </Card>
</CardGroup>

```mdc
::card-group
  :::card
  ---
  title: Dashboard
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/dashboard
  ---
  A dashboard with multi-column layout.
  :::
  
  :::card
  ---
  title: SaaS
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/saas
  ---
  A template with landing, pricing, docs and blog.
  :::
::

​
Steps Component

Create numbered step-by-step guides:
1

Install Docus

Create a new Docus project:
npm create nuxt@latest -- -t github:nuxt-content/docus
2

Start Development Server

Run the dev server:
npm run dev
3

Start Writing

Create your first page in the content/ directory and start writing your documentation!
::steps{level="4"}
  #### Install Docus
  
  Create a new project:
  ```bash
  npm create nuxt@latest -- -t github:nuxt-content/docus

​
Start Development Server

Run the dev server: 
npm run dev
:: 

## Icon Component

Display icons inline using the icon component:

```mdc
:icon{name="i-simple-icons-nuxtdotjs"}
Docus supports all Iconify icons through the @iconify-json packages.

​
Badge Component

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

​
Field Components

Document API properties and parameters: 
::field-group
  ::field{name="analytics" type="boolean"}
  Default to `false` - Enables analytics for your project.
  ::
  
  ::field{name="database" type="boolean"}
  Default to `false` - Enables SQL database support.
  ::
::
Field components are particularly useful for API documentation and configuration references.

​
Collapsible Component

Wrap content to make it collapsible: 
::collapsible

| Prop    | Default   | Type     |
| ------- | --------- | -------- |
| `name`  |           | `string` |
| `size`  | `md`      | `string` |
| `color` | `neutral` | `string` |

::

​
Using Nuxt UI Components

Docus is built on Nuxt UI, which means you have access to all Nuxt UI components: 
<UButton>Click me</UButton>
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: 
::parent-component
  :::child-component
    ::::grandchild-component
    Inner content
    ::::
  :::
::
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us