Skip to content

mdc-components.md

Latest commit

 

History

History
222 lines (163 loc) · 5.03 KB

mdc-components.md

File metadata and controls

222 lines (163 loc) · 5.03 KB

MDC Components Reference

Docus uses Nuxt UI components with MDC syntax.

CRITICAL: Always use the u- prefix for Nuxt UI components in MDC:

::u-page-hero      ✅ Correct (resolves to UPageHero)
::page-hero        ❌ Wrong (fails to resolve)

Documentation Sources

Components:

Typography/Prose:

Page Layout Components

Most used components for documentation sites:

Component Raw Docs Use For
u-page-hero page-hero.md Landing page hero
u-page-section page-section.md Content sections
u-page-grid page-grid.md Responsive grid layout
u-page-card page-card.md Rich content cards
u-page-feature page-feature.md Feature showcase
u-page-cta page-cta.md Call to action
u-page-header page-header.md Page headers

Quick Syntax Examples

Hero with Buttons

::u-page-hero
#title
Project Name

#description
Short description

#headline
  :::u-button{size="sm" to="/changelog" variant="outline"}
  v1.0.0 →
  :::

#links
  :::u-button{color="neutral" size="xl" to="/getting-started" trailing-icon="i-lucide-arrow-right"}
  Get Started
  :::

  :::u-button{color="neutral" size="xl" to="https://github.com/..." target="_blank" variant="outline" icon="i-simple-icons-github"}
  GitHub
  :::
::

Grid with Cards

::u-page-section
  :::u-page-grid
    ::::u-page-card{spotlight class="col-span-2 lg:col-span-1" to="/feature"}
    #title
    Feature Title

    #description
    Feature description
    ::::

    ::::u-page-card{spotlight class="col-span-2"}
      :::::u-color-mode-image{alt="Screenshot" class="w-full rounded-lg" dark="/images/dark.png" light="/images/light.png"}
      :::::

    #title
    Visual Feature

    #description
    With light/dark mode images
    ::::
  :::
::

Card with Code Block

::::u-page-card{spotlight class="col-span-2 md:col-span-1"}
  :::::div{.bg-elevated.rounded-lg.p-3}
  ```ts [config.ts]
  export default {
    option: 'value'
  }

:::::

#title Configuration

#description Easy to configure ::::


---

## Content Components

| Component | Raw Docs | Use For |
|-----------|----------|---------|
| `code-group` | N/A (Nuxt Content) | Multi-tab code blocks |
| `steps` | N/A (Nuxt Content) | Step-by-step guides |
| `tabs` | [tabs.md](https://ui.nuxt.com/raw/docs/components/tabs.md) | Tabbed content |
| `accordion` | [accordion.md](https://ui.nuxt.com/raw/docs/components/accordion.md) | Collapsible sections |

### Code Group (Nuxt Content)

```markdown
::code-group
```ts [nuxt.config.ts]
export default defineNuxtConfig({})

export default defineAppConfig({})

::


### Steps (Nuxt Content)

```markdown
::steps
### Install

Run the install command.

### Configure

Add your configuration.

### Use

Start using the feature.
::

Callout Components

Component Use For
::note Additional information
::tip Helpful suggestions
::warning Important cautions
::caution Critical warnings 
::note{title="Custom Title"}
Additional context here.
::

::tip
Pro tip content.
::

::warning
Be careful with this.
::

::caution
This action cannot be undone.
::

Images

Color Mode Image

:u-color-mode-image{alt="Feature" dark="/images/dark.png" light="/images/light.png" class="rounded-lg" width="859" height="400"}

Grid Classes Reference

Class Usage
col-span-2 Full width
col-span-2 lg:col-span-1 Full mobile, half desktop
col-span-2 md:col-span-1 Full mobile, half tablet+

Full Documentation Reference