Markdown Components
Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown.2
Docus and Nuxt UI Pro provides a set of styled and beautiful prose components to help you write your documentation using the MDC syntax.
Accordion
Use the accordion and accordion-item components to display an Accordion in your content.
content/ folder. You can have a check at the starter for a quick start. ::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 in your content.
::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.
::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.
:::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 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.
false - Enables analytics for your project (coming soon).false - Enables blob storage to store static assets, such as images, videos and more.false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunctionfalse - 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
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
```
::
~~~
:::
::