---
title: "MDC Components"
description: "Use MDC syntax to embed Nuxt UI Prose components in your documentation, including the Accordion, Badge, Callout, Card, and Field documentation components, to significantly improve the expressiveness and interactivity of your docs without writing any Vue component code."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/typography/mdc-components"
---
# MDC Components

> Use MDC syntax to embed Nuxt UI Prose components in your documentation, including the Accordion, Badge, Callout, Card, and Field documentation components, to significantly improve the expressiveness and interactivity of your docs without writing any Vue component code.

Prose components are alternatives to standard HTML typography tags, providing custom UI in Markdown.

**Movk Nuxt Docs** and **Nuxt UI** provide beautifully designed Prose components that support [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).

<prose-note to="https://ui.nuxt.com/getting-started">

This page only lists the Prose components suited to documentation. All Nuxt UI components can be used in Markdown. For the full component list, see the [Nuxt UI documentation](https://ui.nuxt.com/getting-started).

</prose-note>

### `Accordion`

Use the `accordion` and `accordion-item` components to embed an [Accordion](https://ui.nuxt.com/components/accordion) in your content.

**Q: What is Movk Nuxt Docs, and what are its main features?**

Movk Nuxt Docs is a fully integrated documentation solution built with Nuxt UI. It is a theme based on the UI documentation template, providing visuals out of the box. Users can focus on writing content with Markdown and MDC syntax.

**Q: How do I get started with Movk Nuxt Docs?**

To start a Movk Nuxt Docs project, all you need is a 

content/

 folder. You can check out the starter template to get going quickly.

**Q: What is Nuxt UI?**

Nuxt UI

 is a collection of high-quality Vue components, composables, and utilities.

```mdc
::accordion

  :::accordion-item{label="What is Movk Nuxt Docs, and what are its main features?" icon="i-lucide-circle-help"}
  Movk Nuxt Docs is a fully integrated documentation solution built with Nuxt UI. It is a theme based on the UI documentation template, providing visuals out of the box. Users can focus on writing content with Markdown and MDC syntax.
  :::

  :::accordion-item{label="How do I get started with Movk Nuxt Docs?" icon="i-lucide-circle-help"}
  To start a Movk Nuxt Docs project, all you need is a `content/` folder. You can check out the starter template to get going quickly.
  :::

  :::accordion-item{label="What is Nuxt UI?" icon="i-lucide-circle-help"}
  [Nuxt UI](https://ui.nuxt.com/) is a collection of high-quality Vue components, composables, and utilities.
  :::
::
```

### `Badge`

Use Markdown in the default slot of the `badge` component to display a [Badge](https://ui.nuxt.com/components/badge) in your content.

```mdc
::badge
**v3.0.0**
::
```

### `Callout`

Use Markdown in the default slot of the `callout` component to add eye-catching contextual information to your content.

Use the `icon` and `color` properties to customize its appearance. You can also pass any property of the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component.

In addition, you can use the `note`, `tip`, `warning`, and `caution` shortcuts, which come with predefined icons and colors.

> [!NOTE]
> 
> This is some additional information.

> [!TIP]
> 
> This is a helpful suggestion.

> [!WARNING]
> 
> Be careful with this action, as it may have unexpected results.

> [!CAUTION]
> 
> This action cannot be undone.

```mdc
::note
This is some additional information.
::

::tip
This is a helpful suggestion.
::

::warning
Be careful with this action, as it may have unexpected results.
::

::caution
This action cannot be undone.
::
```

### `Card` and `CardGroup`

Use Markdown in the default slot of the `card` component to highlight your content.

Use the `title`, `icon`, and `color` properties to customize it. You can also pass any property from [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link).

Use the `card-group` component to wrap your `card` components, grouping them together into a grid layout.

**Dashboard**

A dashboard with a multi-column layout.

**SaaS**

A template with a landing page, pricing, documentation, and a blog.

**Docs**

Documentation with 

@nuxt/content

.

**Landing**

A landing page you can use as a starting point.

```mdc
:::card-group

  ::card
  ---
  title: Dashboard
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/dashboard
  target: _blank
  ---
  A dashboard with a multi-column layout.
  ::

  ::card
  ---
  title: SaaS
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/saas
  target: _blank
  ---
  A complete template with a landing page, pricing, documentation, and a blog.
  ::

  ::card
  ---
  title: Docs
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/docs
  target: _blank
  ---
  A documentation site based on `@nuxt/content`.
  ::

  ::card
  ---
  title: Landing
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/landing
  target: _blank
  ---
  A landing page you can use as a starting point.
  ::

:::
```

### `Collapsible`

Use the `collapsible` component to wrap your content to display a [Collapsible](https://ui.nuxt.com/components/collapsible) in your content.

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        name
      </code>
    </td>
    
    <td>
      
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        md
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        neutral
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
  </tr>
</tbody>
</table>

```mdc
::collapsible

| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::
```

### `Field` and `FieldGroup`

A `field` is a property or parameter displayed in your content. You can group them into a list with `field-group`.

Default to 

false

 - Enables analytics for your project (coming soon).

Default to 

false

 - Enables blob storage to store static assets, such as images, videos and more.

Default to 

false

 - Enables cache storage to cache your server route responses or functions using Nitro's 

cachedEventHandler

 and 

cachedFunction

Default to 

false

 - Enables SQL database to store your application's data.

```mdc
::field-group
  ::field{name="analytics" type="boolean"}
    Default to `false` - Enables analytics for your project (coming soon).
  ::

  ::field{name="blob" type="boolean"}
    Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
  ::

  ::field{name="cache" type="boolean"}
    Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
  ::

  ::field{name="database" type="boolean"}
    Default to `false` - Enables SQL database to store your application's data.
  ::
::
```

### `Icon`

Use the `icon` component to display an [Icon](https://ui.nuxt.com/components/icon) in your content.

```vue
<template>
  <icon name=i-simple-icons-nuxtdotjs />
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=:icon{name="i-simple-icons-nuxtdotjs"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  :</span>
  <span class=swJcz>
  icon</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  name</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight sna2s />
  i-simple-icons-nuxtdotjs</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span></code></pre></template>
</template>
```

### `Kbd`

Use the `kbd` component to display a [Kbd](https://ui.nuxt.com/components/kbd) in your content.

```vue
<template>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=:kbd{value="meta"} :kbd{value="K"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  :</span>
  <span class=swJcz>
  kbd</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  value</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  meta</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
   :kbd</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  value</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  K</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span></code></pre></template>
</template>
```

### `Tabs`

Use the `tabs` and `tabs-item` components to display [Tabs](https://ui.nuxt.com/components/tabs) in your content.

```vue
<template>
  <__flatten>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  callout
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre>
  <blockquote>
  <p>
  [!NOTE]</p>
  <p>
  Lorem velit voluptate ex reprehenderit ullamco et culpa.</p></blockquote></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::tabs{.w-full}
    :::tabs-item{icon="i-lucide-code" label="Code"}
      ```mdc
      ::::callout
      Lorem velit voluptate ex reprehenderit ullamco et culpa.
      ::::
      ```
    ::::
  
    :::tabs-item{icon="i-lucide-eye" label="Preview"}
      :::::callout
      Lorem velit voluptate ex reprehenderit ullamco et culpa.
      :::::
    :::
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  tabs</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  .w-full</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sMK4o>
    :::</span>
  <span class=swJcz>
  tabs-item</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  icon</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight sSs5K />
  i-lucide-code</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   label</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  Code</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sfazB>
      ```</span>
  <span class=sJsPd>
  mdc
  </span></span>
  <span class=line>
  <span class=sJsPd>
      ::::callout
  </span></span>
  <span class=line>
  <span class=sJsPd>
      Lorem velit voluptate ex reprehenderit ullamco et culpa.
  </span></span>
  <span class=line>
  <span class=sJsPd>
      ::::
  </span></span>
  <span class=line>
  <span class=sfazB>
      ```
  </span></span>
  <span class=line>
  <span class=sMK4o>
    ::::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
    :::</span>
  <span class=swJcz>
  tabs-item</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  icon</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  <i class=shiki-icon-highlight sWAvP />
  i-lucide-eye</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   label</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  Preview</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span>
  <span class=line>
  <span class=sMK4o>
      :::::</span>
  <span class=swJcz>
  callout
  </span></span>
  <span class=line>
  <span class=sTEyZ>
      Lorem velit voluptate ex reprehenderit ullamco et culpa.
  </span></span>
  <span class=line>
  <span class=sTEyZ>
      :::::
  </span></span>
  <span class=line>
  <span class=sMK4o>
    :::
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

### `Steps`

Wrap your headings with the Steps component to display a list of steps.

Use the `level` property to define which heading is used for the steps.

#### Start a fresh new project

```bash [Terminal]
npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template
```

#### Run your dev server

```bash [Terminal]
pnpm run dev
```

```mdc
::steps{level="4"}
  #### Start a fresh new project
  
  ```bash [Terminal]
  npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template
  ```
  
  #### Run your dev server
  
  ```bash [Terminal]
  pnpm run dev
  ```
::
```


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.