Essentials

Markdown Components

Use Markdown components to help you structure your content, with the help of Nuxt UI.

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

Docus and Nuxt UI provides a set of styled and beautiful prose components to help you write your documentation using the MDC syntax.

This page highlights only the prose components best suited for writing documentation. However, you can use any Nuxt UI or Nuxt UI 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 in your content.

::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. It's a theme based on the UI 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?" icon="i-lucide-circle-help"}
  [Nuxt UI](https://ui.nuxt.com/) is a collection of premium Vue components, composables and utils.
  :::
::

`Badge`

Use markdown in the default slot of the badge component to display a Badge in your content.

v3.0.0

::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> component.

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

Here's some additional information for you.

Here's a helpful suggestion.

Be careful with this action as it might have unexpected results.

This action cannot be undone.

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

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

Dashboard

A dashboard with multi-column layout.

SaaS

A template with landing, pricing, docs and blog.

Docs

A documentation with @nuxt/content.

Landing

A landing page you can use as starting point.

:::card-group

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

  ::card
  ---
  title: SaaS
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/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-templates/docs
  target: _blank
  ---
  A documentation with `@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 starting point.
  ::

:::

`Collapsible`

Wrap your content with the collapsible component to display a Collapsible in your content.

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

::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 fieldis a prop or parameter to display in your content. You can group them by field-group in a list.

analytics

boolean

Default to false - Enables analytics for your project (coming soon).

blob

boolean

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

cache

boolean

Default to false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunction

database

boolean

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

::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 in your content.

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

`Kbd`

Use the kbd component to display a Kbd in your content.

:kbd{value="meta"} :kbd{value="K"}

`Tabs`

Use the tabs and tabs-item components to display Tabs in your content.

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

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

Start a fresh new project

Terminal

npx nuxi init -t github:nuxt-content/docus

Run docus CLI to run your dev server

Terminal

docus dev

::steps{level="4"}
  #### Start a fresh new project
  
  ```bash [Terminal]
  npx nuxi init -t github:nuxt-content/docus
  ```
  
  #### Run docus CLI to run your dev server
  
  ```bash [Terminal]
  docus dev
  ```
::

Edit this pageorReport an issue

Code Blocks

Display inline code and code blocks in your documentation.

Images and Embeds

Add image, video, and other HTML elements