---
title: Markdown Components
description: Use Markdown components to help you structure your content, with
  the help of Nuxt UI Pro.
navigation:
  icon: i-lucide-component
  title: Components
---

Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown.

**Docus and Nuxt UI Pro** provides a set of styled and beautiful prose components to help you write your documentation using the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax).

::prose-note{to="https://ui.nuxt.com/getting-started"}
This page highlights only the prose components best suited for writing documentation. However, you can use **any Nuxt UI or Nuxt UI Pro component** in your Markdown. For the full list of available components, visit the Nuxt UI documentation.
::

### `Accordion`

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

::tabs
  :::tabs-item{icon="i-lucide-eye" label="Preview"}
    ::::accordion
      :::::accordion-item
      ---
      icon: i-lucide-circle-help
      label: What is Docus and what are its key features??
      ---
      Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
      :::::
    
      :::::accordion-item
      ---
      icon: i-lucide-circle-help
      label: How do I get started with Docus?
      ---
      The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
      :::::
    
      :::::accordion-item{icon="i-lucide-circle-help" label="What is Nuxt UI Pro?"}
      Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
      :::::
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="Code"}
  ```mdc
  ::accordion
  
    :::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
    Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
    :::
  
    :::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
    The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
    :::
  
    :::accordion-item{label="What is Nuxt UI Pro?" icon="i-lucide-circle-help"}
    Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
    :::
  ::
  ```
  :::
::

### `Badge`

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

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
    ::::badge
    **v3.0.0**
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="Code"}
  ```mdc
  ::badge
  **v3.0.0**
  ::
  ```
  :::
::

### `Callout`

Use markdown in the default slot of the `callout` component to add eye-catching context to your content.

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

You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors.

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
    ::::div{.flex.flex-col.gap-4.w-full}
      :::::note{.w-full.my-0}
      Here's some additional information for you.
      :::::
    
      :::::tip{.w-full.my-0}
      Here's a helpful suggestion.
      :::::
    
      :::::warning{.w-full.my-0}
      Be careful with this action as it might have unexpected results.
      :::::
    
      :::::caution{.w-full.my-0}
      This action cannot be undone.
      :::::
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="Code"}
  ```mdc
  ::note
  Here's some additional information.
  ::
  
  ::tip
  Here's a helpful suggestion.
  ::
  
  ::warning
  Be careful with this action as it might 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` props to customize it. You can also pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link).

Wrap your `card` components with the `card-group` component to group them together in a grid layout.

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
    ::::card-group{.w-full.my-0}
      :::::card
      ---
      icon: i-simple-icons-github
      target: _blank
      title: Dashboard
      to: https://github.com/nuxt-ui-pro/dashboard
      ---
      A dashboard with multi-column layout.
      :::::
    
      :::::card
      ---
      icon: i-simple-icons-github
      target: _blank
      title: SaaS
      to: https://github.com/nuxt-ui-pro/saas
      ---
      A template with landing, pricing, docs and blog.
      :::::
    
      :::::card
      ---
      icon: i-simple-icons-github
      target: _blank
      title: Docs
      to: https://github.com/nuxt-ui-pro/docs
      ---
      A documentation with `@nuxt/content`.
      :::::
    
      :::::card
      ---
      icon: i-simple-icons-github
      target: _blank
      title: Landing
      to: https://github.com/nuxt-ui-pro/landing
      ---
      A landing page you can use as starting point.
      :::::
    ::::
  :::

  :::tabs-item{.my-5 icon="i-lucide-code" label="Code"}
  ```mdc
  :::card-group
  
    ::card
    ---
    title: Dashboard
    icon: i-simple-icons-github
    to: https://github.com/nuxt-ui-pro/dashboard
    target: _blank
    ---
    A dashboard with multi-column layout.
    ::
  
    ::card
    ---
    title: SaaS
    icon: i-simple-icons-github
    to: https://github.com/nuxt-ui-pro/saas
    target: _blank
    ---
    A template with landing, pricing, docs and blog.
    ::
  
    ::card
    ---
    title: Docs
    icon: i-simple-icons-github
    to: https://github.com/nuxt-ui-pro/docs
    target: _blank
    ---
    A documentation with `@nuxt/content`.
    ::
  
    ::card
    ---
    title: Landing
    icon: i-simple-icons-github
    to: https://github.com/nuxt-ui-pro/landing
    target: _blank
    ---
    A landing page you can use as starting point.
    ::
  
  :::
  ```
  :::
::

### `Collapsible`

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

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
    ::::collapsible
    | Prop    | Default   | Type     |
    | ------- | --------- | -------- |
    | `name`  |           | `string` |
    | `size`  | `md`      | `string` |
    | `color` | `neutral` | `string` |
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="Code"}
  ```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 prop or parameter to display in your content. You can group them by `field-group` in a list.

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
    ::::field-group{.my-0}
      :::::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.
      :::::
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="Code"}
  ```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.

::code-preview
:icon{name="i-simple-icons-nuxtdotjs"}

 

#code
```mdc
:icon{name="i-simple-icons-nuxtdotjs"}
```
::

### `Kbd`

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

::code-preview
#code
```mdc
:kbd{value="meta"} :kbd{value="K"}
```
::

### `Tabs`

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

::code-preview
  :::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.
      :::::
    ::::
  :::

#code
````mdc
::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.
    :::::
  :::
::
````
::

### `Steps`

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

Use the `level` prop to define which heading will be used for the steps.

::tabs
  :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"}
    ::::steps{level="4"}
    #### Start a fresh new project
    
    ```bash [Terminal]
    npx nuxi init -t github:nuxt-ui-pro/docus
    ```
    
    #### Run docus CLI to run your dev server
    
    ```bash [Terminal]
    docus dev
    ```
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="Code"}
  ````mdc
  ::steps{level="4"}
    #### Start a fresh new project
    
    ```bash [Terminal]
    npx nuxi init -t github:nuxt-ui-pro/docus
    ```
    
    #### Run docus CLI to run your dev server
    
    ```bash [Terminal]
    docus dev
    ```
  ::
  ````
  :::
::