---
title: "CodePreview"
description: "Display code examples with a preview and their source for clearer documentation."
canonical_url: "https://ui.nuxt.com/docs/typography/code-preview"
last_updated: "2026-05-07"
---
# CodePreview

> Display code examples with a preview and their source for clearer documentation.

## Usage

Wrap any content with the `code-preview` component to display a live preview alongside its source code using the `code` slot.

```vue
<template>
  <code-preview>
  <p>
  <code>
  inline code</code></p>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=`inline code`
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  inline code</span>
  <span class=sMK4o>
  `
  </span></span></code></pre></template></code-preview>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::code-preview
  `inline code`
  
  #code
  ```mdc
  `inline code`
  ```
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  code-preview
  </span></span>
  <span class=line>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  inline code</span>
  <span class=sMK4o>
  `
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=spNyl>
  #code
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  mdc
  </span></span>
  <span class=line>
  <span class=sJsPd>
  `inline code`
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProseCodePreview component
 */
interface ProseCodePreviewProps {
  ui?: { root?: ClassNameValue; preview?: ClassNameValue; code?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the CodePreview component
 */
interface CodePreviewSlots {
  default(): any;
  code(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      codePreview: {
        slots: {
          root: 'my-5',
          preview: 'flex justify-center border border-muted relative p-4 rounded-md',
          code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
        },
        variants: {
          code: {
            true: {
              preview: 'border-b-0 rounded-b-none'
            }
          }
        }
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/CodePreview.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/code-preview.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.