Sections
Getting Started
Components
- DocTabs
- Callout
- ComponentPreview
- CommandMenu
- CopyButton
- DocsSidebar
- DocsTableOfContents
- PageHeader
- SiteHeader
- CopyCodeButton
- DocsCopyPage
- CodeBlockCommand
- CommandMenuItem
- CommandMenuKbd
- GitHubLink
- LucideIcon
- MainNav
- MobileNav
- ModeSwitcher
- PageHeaderDescription
- PageHeaderHeading
- SiteBody
- SiteConfig
- SiteFooter
- OgImage (Custom)
MDC Components
This document covers the three main custom MDC (Markdown Components) used in this template to seamlessly display UI component previews and their raw source code.
ComponentPreview
The <ComponentPreview> (or ::component-preview in Markdown) is the main component used to showcase UI components and their examples. It automatically renders a working interactive component alongside its source code in a tabbed interface.
File Location
app/components/content/ComponentPreview.vue
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | (Required) | The name of the component (e.g., Button). It will look for the component first in components/demo/, and if not found, it falls back to components/ui/. |
align | "center" | "start" | "end" | "center" | Alignment of the rendered component inside the preview box. |
description | string | undefined | An optional description for the component. |
hideCode | boolean | false | If true, the "Code" tab and source code will be completely hidden, rendering only the interactive component block. |
class | HTMLAttributes["class"] | undefined | Custom CSS classes applied to the root wrapper. |
Usage
<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>::component-preview
---
name: ButtonDemo
description: A basic button example
align: center
---
::Or using the shorthand inline syntax:
::component-preview{name="ButtonDemo" align="end"}The component-preview by default looks for components in the components/demo/ directory, and in components/ui/. This allows you to organize your demo components separately from your main UI components.