Introduction

Beautiful typography components and utilities to style your content with Nuxt UI.

Nuxt UI brings beautiful, consistent styling to the Prose components provided by @nuxtjs/mdc. The Nuxt MDC module transforms your markdown into semantic Vue components, and Nuxt UI applies its design system so your content automatically adapts to your application's theme.

For Nuxt Content installation and setup, check the Content integration guide.

Usage

The typography system powered by Nuxt MDC's prose components and styled by Nuxt UI, provides multiple ways to render styled content:

Markdown Rendering - Use ContentRenderer or MDC component to render markdown with automatic prose styling
Direct Vue Usage - Import and use prose components directly in your Vue templates

With ContentRenderer

The simplest way - your markdown is automatically styled when using <ContentRenderer> component:

pages/[...slug].vue

<script setup>
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
</script>

<template>
  <ContentRenderer :value="page" />
</template>

When you write markdown, Nuxt MDC automatically maps each element to a styled prose component:

# Heading → <ProseH1> (with accessible anchor links)
**bold** → <ProseStrong> (styled according to your theme)
`code` → <ProseCode> (with syntax highlighting)
...and all other markdown syntax is rendered as their corresponding prose components, ensuring consistent design and theming.

With MDC component

For more control over markdown rendering, use the <MDC> component:

<script setup lang="ts">
const value = `# Hello World

Learn more about the **MDC** component in the [documentation](https://github.com/nuxt-modules/mdc).
`
</script>

<template>
  <MDC :value="value" />
</template>

Use this approach when you need to:

Render markdown content from external sources such as APIs or databases
Inject dynamic or custom data into your markdown
Build flexible, dynamic content systems
Safely process and display user-generated markdown

With Prose components

Use prose components directly in Vue templates for maximum control:

<template>
  <ProseTable>
    <ProseThead>
      <ProseTr>
        <ProseTh>Prop</ProseTh>
        <ProseTh>Default</ProseTh>
      </ProseTr>
    </ProseThead>
    <ProseTbody>
      <ProseTr>
        <ProseTd>
          <ProseCode>color</ProseCode>
        </ProseTd>
        <ProseTd>
          <ProseCode>neutral</ProseCode>
        </ProseTd>
      </ProseTr>
    </ProseTbody>
  </ProseTable>
</template>

MDC Syntax

You can include Vue components in markdown files using MDC Syntax.

Regular markdown with bold and italic text.

Use MDC components for rich interactions!

Use pnpm add @nuxt/ui to install

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

Regular markdown with **bold** and *italic* text.

::callout{icon="i-lucide-rocket" color="primary"}
Use MDC components for rich interactions!
::

::tabs

:::tabs-item{label="Installation"}
Use pnpm add @nuxt/ui to install
:::

:::tabs-item{label="Usage"}
Import components and use them in your templates
:::

::

::code-group

```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```

```bash [bun]
bun add @nuxt/ui
```

::

Components

Standard markdown elements enhanced with beautiful styling:

Headers & Text

H1-H5 headings, paragraphs, formatting, and links with proper hierarchy.

Lists & Tables

Organized content with responsive tables and nested lists.

Images & Media

Responsive images with zoom and rich media embeds.

Code Blocks

Syntax highlighting with copy functionality and language support.

Interactive elements for rich content authoring using MDC syntax:

Content Enhancement

Badge, Callout, Card for visual appeal and important information.

Interactive Elements

Accordion, Tabs, Collapsible for engaging user experiences.

Code Presentation

CodeGroup, CodePreview, CodeTree for advanced code display.

Documentation Tools

Field, Steps, Icon, Kbd for structured documentation.

Theme

Override any prose component styling in your app configuration:

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h1: {
        slots: {
          base: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl'
        }
      },
      p: {
        base: 'leading-7 [&:not(:first-child)]:mt-6'
      }
    }
  }
})

useToast

A composable to display toast notifications in your app.

Headers and Text

Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.