ComponentPreview

Copy<script setup lang="ts">
import { ArrowUpIcon } from "lucide-vue-next";
</script>

<template>
  <div class="flex flex-wrap items-center gap-2 md:flex-row">
    <Button variant="outline">
      Button
    </Button>
    <Button variant="outline" size="icon" aria-label="Submit">
      <ArrowUpIcon />
    </Button>
  </div>
</template>

The ComponentPreview component is a powerful MDC (Markdown Components) feature that allows you to display interactive Vue components alongside their source code in your documentation.

Usage

Use the ::component-preview syntax in your markdown files:

Copy::component-preview
---
name: ButtonDemo
description: A basic button example
align: center
---
::

Or using the shorthand inline syntax:

Copy::component-preview{name="ButtonDemo" align="end"}

How It Works

The ComponentPreview component automatically:

1. Looks for the component in components/demo/ first
2. Falls back to components/ui/ if not found in demo
3. Renders the component interactively
4. Displays the source code in a tabbed interface

Examples

Basic Preview

Component TabsDemo not found in components/demo or components/ui.

With Alignment

You can control the alignment of the preview:

Copy::component-preview
---
name: ButtonDemo
align: start
---
::

Hide Code

You can hide the code tab to show only the interactive preview:

Copy::component-preview
---
name: ButtonDemo
hideCode: true
---
::

Component Resolution

The component resolver follows this order:

1. components/demo/ComponentName.vue
2. components/demo/ComponentName/index.vue
3. components/ui/componentname/ComponentName.vue
4. components/ui/ComponentName.vue

API Reference

ComponentPreview

Creating Demo Components

To create a demo component, add a .vue file in app/components/demo/:

Copy<!-- app/components/demo/MyComponentDemo.vue -->
<template>
  <div>
    <MyComponent />
  </div>
</template>

Then reference it in your documentation:

Copy::component-preview
---
name: MyComponentDemo
---
::

Best Practices

1. Use descriptive names: Name your demo components clearly (e.g., ButtonDemo, ButtonWithIcon)
2. Keep demos simple: Focus on demonstrating one feature or variant per demo
3. Add descriptions: Use the description prop to explain what the demo shows
4. Organize demos: Group related demos in your documentation