From 77b96ccbd752441aa9dba8f6ebf590908e6eae12 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 4 Sep 2023 22:36:40 +0800
Subject: [PATCH] feat: improve component preview components

---
 apps/www/.vitepress/config.mts                |  4 ++
 .../theme/components/ComponentPreview.vue     |  9 ++-
 .../www/.vitepress/theme/plugins/previewer.ts | 39 ++++++++++
 apps/www/.vitepress/theme/plugins/utils.ts    | 71 +++++++++++++++++++
 apps/www/package.json                         |  1 +
 apps/www/src/content/docs/components-json.md  |  6 +-
 .../src/content/docs/components/accordion.md  |  6 +-
 .../content/docs/components/alert-dialog.md   | 17 ++---
 apps/www/src/content/docs/components/alert.md |  6 +-
 .../content/docs/components/aspect-ratio.md   |  8 +--
 .../www/src/content/docs/components/avatar.md |  7 +-
 apps/www/src/content/docs/components/badge.md |  7 +-
 .../www/src/content/docs/components/button.md |  8 +--
 .../src/content/docs/components/calendar.md   |  6 +-
 apps/www/src/content/docs/components/card.md  |  7 +-
 .../src/content/docs/components/checkbox.md   |  7 +-
 .../content/docs/components/collapsible.md    |  6 +-
 .../content/docs/components/context-menu.md   |  6 +-
 .../content/docs/components/date-picker.md    | 18 +----
 .../www/src/content/docs/components/dialog.md |  7 +-
 .../src/content/docs/components/hover-card.md |  7 +-
 apps/www/src/content/docs/components/input.md |  6 +-
 apps/www/src/content/docs/components/label.md |  7 +-
 .../src/content/docs/components/menubar.md    |  6 +-
 .../docs/components/navigation-menu.md        |  7 +-
 .../src/content/docs/components/popover.md    |  6 +-
 .../src/content/docs/components/progress.md   |  6 +-
 .../content/docs/components/radio-group.md    |  6 +-
 .../content/docs/components/scroll-area.md    |  6 +-
 .../www/src/content/docs/components/select.md |  6 +-
 .../src/content/docs/components/separator.md  |  6 +-
 apps/www/src/content/docs/components/sheet.md |  7 +-
 .../src/content/docs/components/skeleton.md   |  7 +-
 .../www/src/content/docs/components/slider.md |  6 +-
 .../www/src/content/docs/components/switch.md |  7 +-
 apps/www/src/content/docs/components/table.md |  7 +-
 apps/www/src/content/docs/components/tabs.md  |  7 +-
 .../src/content/docs/components/textarea.md   |  7 +-
 .../www/src/content/docs/components/toggle.md |  6 +-
 .../src/content/docs/components/tooltip.md    |  7 +-
 .../registry/default/examples/AvatarDemo.vue  |  2 +-
 .../default/examples/CardWithForm.vue         | 67 +++++++++++++++++
 .../default/ui/accordion/Accordion.vue        |  2 +-
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  3 +
 45 files changed, 238 insertions(+), 213 deletions(-)
 create mode 100644 apps/www/.vitepress/theme/plugins/previewer.ts
 create mode 100644 apps/www/.vitepress/theme/plugins/utils.ts
 create mode 100644 apps/www/src/lib/registry/default/examples/CardWithForm.vue

diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index 78e6b8e1..b4920fbc 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -1,6 +1,7 @@
 import path from 'node:path'
 import { defineConfig } from 'vitepress'
 import Icons from 'unplugin-icons/vite'
+import ComponentPreviewPlugin from './theme/plugins/previewer'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -9,6 +10,9 @@ export default defineConfig({
   srcDir: path.resolve(__dirname, '../src/content'),
   markdown: {
     theme: 'css-variables',
+    config(md) {
+      md.use(ComponentPreviewPlugin)
+    },
   },
   vite: {
     plugins: [
diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue
index b27318d4..4e16598a 100644
--- a/apps/www/.vitepress/theme/components/ComponentPreview.vue
+++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue
@@ -7,6 +7,8 @@ import { cn } from '@/lib/utils'
 const props = withDefaults(defineProps<{
   name: string
   align?: 'center' | 'start' | 'end'
+  sfcTsCode?: string
+  sfcTsHtml?: string
 }>(), { align: 'center' })
 
 const Component = defineAsyncComponent({
@@ -17,7 +19,9 @@ const Component = defineAsyncComponent({
 </script>
 
 <template>
-  <div class="not-docs group relative my-4 flex flex-col space-y-2">
+  <div
+    class="not-docs group relative my-4 flex flex-col space-y-2"
+  >
     <Tabs default-value="preview" class="relative mr-auto w-full">
       <div class="flex items-center justify-between pb-3">
         <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
@@ -47,7 +51,8 @@ const Component = defineAsyncComponent({
         </div>
       </TabsContent>
       <TabsContent value="code">
-        <slot />
+        <div v-if="sfcTsHtml" class="language-vue" style="flex: 1;" v-html="decodeURIComponent(sfcTsHtml)" />
+        <slot v-else />
       </TabsContent>
     </Tabs>
   </div>
diff --git a/apps/www/.vitepress/theme/plugins/previewer.ts b/apps/www/.vitepress/theme/plugins/previewer.ts
new file mode 100644
index 00000000..501b6930
--- /dev/null
+++ b/apps/www/.vitepress/theme/plugins/previewer.ts
@@ -0,0 +1,39 @@
+import { dirname, resolve } from 'node:path'
+import fs from 'node:fs'
+import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
+import { generateDemoComponent, parseProps } from './utils'
+
+export default function (md: MarkdownRenderer) {
+  function addRenderRule(type: string) {
+    const defaultRender = md.renderer.rules[type]
+    md.renderer.rules[type] = (tokens, idx, options, env, self) => {
+      const token = tokens[idx]
+      const content = token.content.trim()
+      if (!content.match(/^<ComponentPreview\s/) || !content.endsWith('/>'))
+        return defaultRender!(tokens, idx, options, env, self)
+
+      const { path } = env as MarkdownEnv
+      const props = parseProps(content)
+
+      const { name, attrs } = props
+      const pluginPath = dirname(__dirname)
+      const srcPath = resolve(pluginPath, '../../src/lib/registry/default/examples/', `${name}.vue`).replace(/\\/g, '/')
+
+      if (!fs.existsSync(srcPath)) {
+        console.error(`rendering ${path}: ${srcPath} does not exist`)
+        return defaultRender!(tokens, idx, options, env, self)
+      }
+
+      const demoScripts = generateDemoComponent(md, env, {
+        attrs,
+        props,
+        code: fs.readFileSync(srcPath, 'utf-8'),
+        path: srcPath,
+      })
+
+      return demoScripts
+    }
+  }
+  addRenderRule('html_block')
+  addRenderRule('html_inline')
+}
diff --git a/apps/www/.vitepress/theme/plugins/utils.ts b/apps/www/.vitepress/theme/plugins/utils.ts
new file mode 100644
index 00000000..2d925566
--- /dev/null
+++ b/apps/www/.vitepress/theme/plugins/utils.ts
@@ -0,0 +1,71 @@
+// Credit to @hairyf https://github.com/hairyf/markdown-it-vitepress-demo
+
+import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
+import { baseParse } from '@vue/compiler-core'
+import type { AttributeNode, ElementNode } from '@vue/compiler-core'
+
+export interface GenerateOptions {
+  attrs?: string
+  props: Record<string, any>
+  path: string
+  code: string
+}
+
+export function parse(
+  md: MarkdownRenderer,
+  env: MarkdownEnv,
+  { code, attrs: _attrs, props }: GenerateOptions,
+) {
+  const highlightedHtml = md.options.highlight!(code, 'vue', _attrs || '')
+  const sfcTsHtml = highlightedHtml
+
+  const attrs
+   = `sfcTsCode="${encodeURIComponent(code)}"\n`
+   + `sfcTsHtml="${encodeURIComponent(sfcTsHtml)}"\n`
+   + `v-bind='${JSON.stringify(props)}'\n`
+
+  return {
+    attrs,
+    highlightedHtml,
+    sfcTsCode: code,
+    sfcTsHtml,
+  }
+}
+
+export function generateDemoComponent(
+  md: MarkdownRenderer,
+  env: MarkdownEnv,
+  options: GenerateOptions,
+) {
+  const { attrs } = parse(md, env, options)
+  return `<ComponentPreview \n${attrs}></ComponentPreview>`.trim()
+}
+
+export function isUndefined(v: any): v is undefined {
+  return v === undefined || v === null
+}
+
+function getPropsMap(attrs: any[]) {
+  const map: Record<string, any> = {}
+  for (const { name, value, exp, arg } of attrs) {
+    if (name === 'bind') {
+      if (!isUndefined(arg?.content))
+        map[arg.content] = JSON.parse(exp.content)
+      continue
+    }
+    if (isUndefined(value?.content) || value?.content === '')
+      map[name] = true
+    else if (['true', 'false'].includes(value?.content || ''))
+      map[name] = value?.content === 'true'
+    else
+      map[name] = value?.content
+  }
+  return map
+}
+
+export function parseProps(content: string) {
+  const ast = baseParse(content)
+  const demoElement = ast.children[0] as ElementNode
+
+  return getPropsMap(demoElement.props as AttributeNode[])
+}
diff --git a/apps/www/package.json b/apps/www/package.json
index b968fa12..1972e58b 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -30,6 +30,7 @@
     "@iconify/vue": "^4.1.1",
     "@types/node": "^20.5.7",
     "@vitejs/plugin-vue": "^4.1.0",
+    "@vue/compiler-core": "^3.3.4",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
     "radix-vue": "^0.1.29",
diff --git a/apps/www/src/content/docs/components-json.md b/apps/www/src/content/docs/components-json.md
index 2530c136..1fedb5d6 100644
--- a/apps/www/src/content/docs/components-json.md
+++ b/apps/www/src/content/docs/components-json.md
@@ -42,11 +42,7 @@ The style for your components. **This cannot be changed after initialization.**
 }
 ```
 
-<ComponentPreview name="card-with-form">
-
-<div />
-
-</ComponentPreview>
+<ComponentPreview name="CardWithForm" />
 
 ## tailwind
 
diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
index 384c5eff..638e86b2 100644
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -6,11 +6,7 @@ primitive: https://www.radix-vue.com/components/accordion.html
 ---
 
 
-<ComponentPreview name="AccordionDemo" class="[&_.accordion]:sm:max-w-[70%]">
-
-<<< ../../../lib/registry/default/examples/AccordionDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="AccordionDemo" class="[&_.accordion]:sm:max-w-[70%]" />
 
 
 
diff --git a/apps/www/src/content/docs/components/alert-dialog.md b/apps/www/src/content/docs/components/alert-dialog.md
index bcaedf6a..58842456 100644
--- a/apps/www/src/content/docs/components/alert-dialog.md
+++ b/apps/www/src/content/docs/components/alert-dialog.md
@@ -4,22 +4,19 @@ description: A modal dialog that interrupts the user with important content and
 source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/alert-dialog 
 primitive: https://www.radix-vue.com/components/alert-dialog.html
 ---
-
-
-<ComponentPreview name="AlertDialogDemo" >
-
-<<< ../../../lib/registry/default/examples/AlertDialogDemo.vue
-
-</ComponentPreview>
+    
+ 
+<ComponentPreview name="AlertDialogDemo" />
 
 
 
+ 
 ## Installation
 
 ```bash
-npx shadcn-vue@latest add alert-dialog
-```
-
+npx shadcn-vue@latest add alert-dialog 
+```  
+  
 <ManualInstall>
 
 1. Install `radix-vue`:
diff --git a/apps/www/src/content/docs/components/alert.md b/apps/www/src/content/docs/components/alert.md
index c8a64ee6..958392a8 100644
--- a/apps/www/src/content/docs/components/alert.md
+++ b/apps/www/src/content/docs/components/alert.md
@@ -4,11 +4,7 @@ description: Displays a callout for user attention.
 ---
 
 
-<ComponentPreview name="AlertDemo"  >
-
-<<< ../../../lib/registry/default/examples/AlertDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="AlertDemo"  /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/aspect-ratio.md b/apps/www/src/content/docs/components/aspect-ratio.md
index 1ca56e89..43e2d8e8 100644
--- a/apps/www/src/content/docs/components/aspect-ratio.md
+++ b/apps/www/src/content/docs/components/aspect-ratio.md
@@ -6,13 +6,7 @@ primitive: https://www.radix-vue.com/components/aspect-ratio.html
 ---
 
 
-<ComponentPreview name="AspectRatioDemo"  >
-
-<<< ../../../lib/registry/default/examples/AspectRatioDemo.vue
-
-</ComponentPreview>
-
-
+<ComponentPreview name="AspectRatioDemo" />
 
 ## Installation
 
diff --git a/apps/www/src/content/docs/components/avatar.md b/apps/www/src/content/docs/components/avatar.md
index e04305bb..2821313a 100644
--- a/apps/www/src/content/docs/components/avatar.md
+++ b/apps/www/src/content/docs/components/avatar.md
@@ -6,12 +6,7 @@ primitive: https://www.radix-vue.com/components/avatar.html
 ---
 
 
-<ComponentPreview name="AvatarDemo"  >
-
-<<< ../../../lib/registry/default/examples/AvatarDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="AvatarDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/badge.md b/apps/www/src/content/docs/components/badge.md
index 8bbaf92a..88d47894 100644
--- a/apps/www/src/content/docs/components/badge.md
+++ b/apps/www/src/content/docs/components/badge.md
@@ -4,12 +4,7 @@ description: Displays a badge or a component that looks like a badge.
 ---
 
 
-<ComponentPreview name="BadgeDemo"  >
-
-<<< ../../../lib/registry/default/examples/BadgeDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="BadgeDemo"  /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/button.md b/apps/www/src/content/docs/components/button.md
index d65a3c25..a82c5ff3 100644
--- a/apps/www/src/content/docs/components/button.md
+++ b/apps/www/src/content/docs/components/button.md
@@ -4,13 +4,7 @@ description: Displays a button or a component that looks like a button.
 ---
 
 
-<ComponentPreview name="ButtonDemo"  >
-
-<<< ../../../lib/registry/default/examples/ButtonDemo.vue
-
-</ComponentPreview>
-
-
+<ComponentPreview name="ButtonDemo"  /> 
 
 ## Installation
 
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index 58bd3046..71ca6299 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -4,11 +4,7 @@ description: A date field component that allows users to enter and edit date.
 ---
 
 
-<ComponentPreview name="CalendarDemo"  >
-
-<<< ../../../lib/registry/default/examples/CalendarDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="CalendarDemo"  /> 
 
 ## About
 
diff --git a/apps/www/src/content/docs/components/card.md b/apps/www/src/content/docs/components/card.md
index 1ca7cc8c..45d9c612 100644
--- a/apps/www/src/content/docs/components/card.md
+++ b/apps/www/src/content/docs/components/card.md
@@ -4,12 +4,7 @@ description: Displays a card with header, content, and footer.
 ---
 
 
-<ComponentPreview name="CardDemo"  >
-
-<<< ../../../lib/registry/default/examples/CardDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="CardDemo"  /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md
index 70359ad5..5c0e555c 100644
--- a/apps/www/src/content/docs/components/checkbox.md
+++ b/apps/www/src/content/docs/components/checkbox.md
@@ -6,12 +6,7 @@ primitive: https://www.radix-vue.com/components/checkbox.html
 ---
 
 
-<ComponentPreview name="CheckboxDemo"  >
-
-<<< ../../../lib/registry/default/examples/CheckboxDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="CheckboxDemo"  /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index 1c013d8a..58c9878d 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -6,11 +6,7 @@ primitive: https://www.radix-vue.com/components/collapsible.html
 ---
 
 
-<ComponentPreview name="CollapsibleDemo"  >
-
-<<< ../../../lib/registry/default/examples/CollapsibleDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="CollapsibleDemo" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/context-menu.md b/apps/www/src/content/docs/components/context-menu.md
index 203da0b6..1256b03e 100644
--- a/apps/www/src/content/docs/components/context-menu.md
+++ b/apps/www/src/content/docs/components/context-menu.md
@@ -6,11 +6,7 @@ primitive: https://www.radix-vue.com/components/context-menu.html
 ---
 
 
-<ComponentPreview name="ContextMenuDemo"  >
-
-<<< ../../../lib/registry/default/examples/ContextMenuDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="ContextMenuDemo"  /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index 22c22fd8..e9408747 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -4,11 +4,7 @@ description: A date picker component with range and presets.
 ---
 
 
-<ComponentPreview name="DatePickerDemo"  >
-
-<<< ../../../lib/registry/default/examples/DatePickerDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="DatePickerDemo"  /> 
 
 ## Installation
 
@@ -62,18 +58,10 @@ const date = ref<Date>()
 
 ### Date Range Picker
 
-<ComponentPreview name="DatePickerWithRange"  >
-
-<<< ../../../lib/registry/default/examples/DatePickerWithRange.vue
-
-</ComponentPreview>
+<ComponentPreview name="DatePickerWithRange"  /> 
 
 
 ### Date Picker
 
 
-<ComponentPreview name="DatePickerDemo"  >
-
-<<< ../../../lib/registry/default/examples/DatePickerDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="DatePickerDemo"  />
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index ba991b07..04402fa0 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -6,12 +6,7 @@ primitive: https://www.radix-vue.com/components/dialog.html
 ---
 
 
-<ComponentPreview name="DialogDemo" >
-
-<<< ../../../lib/registry/default/examples/DialogDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="DialogDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/hover-card.md b/apps/www/src/content/docs/components/hover-card.md
index 9075bd82..86a1dc3b 100644
--- a/apps/www/src/content/docs/components/hover-card.md
+++ b/apps/www/src/content/docs/components/hover-card.md
@@ -6,12 +6,7 @@ primitive: https://www.radix-vue.com/components/hover-card.html
 ---
 
 
-<ComponentPreview name="HoverCardDemo" >
-
-<<< ../../../lib/registry/default/examples/HoverCardDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="HoverCardDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index dc597469..4748760a 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -4,11 +4,7 @@ description: Displays a form input field or a component that looks like an input
 ---
 
 
-<ComponentPreview name="InputDemo" class="[&_input]:max-w-xs" >
-
-<<< ../../../lib/registry/default/examples/InputDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="InputDemo" class="[&_input]:max-w-xs" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/label.md b/apps/www/src/content/docs/components/label.md
index 8863f929..08b63bd5 100644
--- a/apps/www/src/content/docs/components/label.md
+++ b/apps/www/src/content/docs/components/label.md
@@ -5,12 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/label.html
 ---
 
-<ComponentPreview name="LabelDemo" >
-
-<<< ../../../lib/registry/default/examples/LabelDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="LabelDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/menubar.md b/apps/www/src/content/docs/components/menubar.md
index 82fe73af..7fa8f322 100644
--- a/apps/www/src/content/docs/components/menubar.md
+++ b/apps/www/src/content/docs/components/menubar.md
@@ -5,11 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/menubar.html
 ---
 
-<ComponentPreview name="MenubarDemo" >
-
-<<< ../../../lib/registry/default/examples/MenubarDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="MenubarDemo" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md
index 3e103b96..f30e11a7 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -5,12 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/navigation-menu.html
 ---
 
-<ComponentPreview name="NavigationMenuDemo" >
-
-<<< ../../../lib/registry/default/examples/NavigationMenuDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="NavigationMenuDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/popover.md b/apps/www/src/content/docs/components/popover.md
index 921b4deb..b8d9f648 100644
--- a/apps/www/src/content/docs/components/popover.md
+++ b/apps/www/src/content/docs/components/popover.md
@@ -6,11 +6,7 @@ primitive: https://www.radix-vue.com/components/popover.html
 ---
 
 
-<ComponentPreview name="PopoverDemo" >
-
-<<< ../../../lib/registry/default/examples/PopoverDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="PopoverDemo" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/progress.md b/apps/www/src/content/docs/components/progress.md
index 5e144745..eb7d9156 100644
--- a/apps/www/src/content/docs/components/progress.md
+++ b/apps/www/src/content/docs/components/progress.md
@@ -5,11 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/progress.html
 ---
 
-<ComponentPreview name="ProgressDemo" >
-
-<<< ../../../lib/registry/default/examples/ProgressDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="ProgressDemo" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index dd7bafb0..72bbab65 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -5,11 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/radio-group.html
 ---
 
-<ComponentPreview name="RadioGroupDemo" >
-
-<<< ../../../lib/registry/default/examples/RadioGroupDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="RadioGroupDemo" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/scroll-area.md b/apps/www/src/content/docs/components/scroll-area.md
index dc0f0106..2340cc42 100644
--- a/apps/www/src/content/docs/components/scroll-area.md
+++ b/apps/www/src/content/docs/components/scroll-area.md
@@ -5,11 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/scroll-area.html
 ---
 
-<ComponentPreview name="ScrollAreaDemo" >
-
-<<< ../../../lib/registry/default/examples/ScrollAreaDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="ScrollAreaDemo" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md
index 54bc02a3..0231af40 100644
--- a/apps/www/src/content/docs/components/select.md
+++ b/apps/www/src/content/docs/components/select.md
@@ -6,11 +6,7 @@ primitive: https://www.radix-vue.com/components/popover.html
 ---
 
 
-<ComponentPreview name="SelectDemo" >
-
-<<< ../../../lib/registry/default/examples/SelectDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="SelectDemo" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md
index f63b186c..17087ba7 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -5,11 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/separator.html
 ---
 
-<ComponentPreview name="SeparatorDemo" >
-
-<<< ../../../lib/registry/default/examples/SeparatorDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="SeparatorDemo" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index e6073a84..8be8f8fa 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -5,12 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/dialog.html
 ---
 
-<ComponentPreview name="SheetDemo" >
-
-<<< ../../../lib/registry/default/examples/SheetDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="SheetDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/skeleton.md b/apps/www/src/content/docs/components/skeleton.md
index cae5d4fc..c596c686 100644
--- a/apps/www/src/content/docs/components/skeleton.md
+++ b/apps/www/src/content/docs/components/skeleton.md
@@ -3,12 +3,7 @@ title: Skeleton
 description: Use to show a placeholder while content is loading. 
 ---
 
-<ComponentPreview name="SkeletonDemo" >
-
-<<< ../../../lib/registry/default/examples/SkeletonDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="SkeletonDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/slider.md b/apps/www/src/content/docs/components/slider.md
index e8f2e50a..8e699044 100644
--- a/apps/www/src/content/docs/components/slider.md
+++ b/apps/www/src/content/docs/components/slider.md
@@ -5,11 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/slider.html
 ---
 
-<ComponentPreview name="SliderDemo" >
-
-<<< ../../../lib/registry/default/examples/SliderDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="SliderDemo" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index 19bceb27..3ad510d3 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -5,12 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/switch.html
 ---
 
-<ComponentPreview name="SwitchDemo" >
-
-<<< ../../../lib/registry/default/examples/SwitchDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="SwitchDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/table.md b/apps/www/src/content/docs/components/table.md
index 136ea3fe..5bb6213f 100644
--- a/apps/www/src/content/docs/components/table.md
+++ b/apps/www/src/content/docs/components/table.md
@@ -3,12 +3,7 @@ title: Table
 description: A responsive table component.
 ---
 
-<ComponentPreview name="TableDemo" >
-
-<<< ../../../lib/registry/default/examples/TableDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="TableDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md
index ba4da2f2..d3f5d355 100644
--- a/apps/www/src/content/docs/components/tabs.md
+++ b/apps/www/src/content/docs/components/tabs.md
@@ -5,12 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/tabs.html
 ---
 
-<ComponentPreview name="TabsDemo" >
-
-<<< ../../../lib/registry/default/examples/TabsDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="TabsDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md
index 5ba71ca1..ca10f22d 100644
--- a/apps/www/src/content/docs/components/textarea.md
+++ b/apps/www/src/content/docs/components/textarea.md
@@ -3,12 +3,7 @@ title: Textarea
 description: Displays a form textarea or a component that looks like a textarea.
 ---
 
-<ComponentPreview name="TextareaDemo" >
-
-<<< ../../../lib/registry/default/examples/TextareaDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="TextareaDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md
index a8c6bf5f..a19ca3f0 100644
--- a/apps/www/src/content/docs/components/toggle.md
+++ b/apps/www/src/content/docs/components/toggle.md
@@ -5,11 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/toggle.html
 ---
 
-<ComponentPreview name="ToggleDemo" >
-
-<<< ../../../lib/registry/default/examples/ToggleDemo.vue
-
-</ComponentPreview>
+<ComponentPreview name="ToggleDemo" /> 
 
 
 
diff --git a/apps/www/src/content/docs/components/tooltip.md b/apps/www/src/content/docs/components/tooltip.md
index 2a31cfd0..abfcfeee 100644
--- a/apps/www/src/content/docs/components/tooltip.md
+++ b/apps/www/src/content/docs/components/tooltip.md
@@ -5,12 +5,7 @@ source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/regis
 primitive: https://www.radix-vue.com/components/tooltip.html
 ---
 
-<ComponentPreview name="TooltipDemo" >
-
-<<< ../../../lib/registry/default/examples/TooltipDemo.vue
-
-</ComponentPreview>
-
+<ComponentPreview name="TooltipDemo" /> 
 
 
 ## Installation
diff --git a/apps/www/src/lib/registry/default/examples/AvatarDemo.vue b/apps/www/src/lib/registry/default/examples/AvatarDemo.vue
index ca53315d..cfecb172 100644
--- a/apps/www/src/lib/registry/default/examples/AvatarDemo.vue
+++ b/apps/www/src/lib/registry/default/examples/AvatarDemo.vue
@@ -4,7 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/a
 
 <template>
   <Avatar>
-    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
     <AvatarFallback>CN</AvatarFallback>
   </Avatar>
 </template>
diff --git a/apps/www/src/lib/registry/default/examples/CardWithForm.vue b/apps/www/src/lib/registry/default/examples/CardWithForm.vue
new file mode 100644
index 00000000..975abee5
--- /dev/null
+++ b/apps/www/src/lib/registry/default/examples/CardWithForm.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+</script>
+
+<template>
+  <Card class="w-[350px]">
+    <CardHeader>
+      <CardTitle>Create project</CardTitle>
+      <CardDescription>Deploy your new project in one-click.</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form>
+        <div class="grid w-full items-center gap-4">
+          <div class="flex flex-col space-y-1.5">
+            <Label html-for="name">Name</Label>
+            <Input id="name" placeholder="Name of your project" />
+          </div>
+          <div class="flex flex-col space-y-1.5">
+            <Label html-for="framework">Framework</Label>
+            <Select>
+              <SelectTrigger id="framework">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent position="popper">
+                <SelectItem value="next">
+                  Next.js
+                </SelectItem>
+                <SelectItem value="sveltekit">
+                  SvelteKit
+                </SelectItem>
+                <SelectItem value="astro">
+                  Astro
+                </SelectItem>
+                <SelectItem value="nuxt">
+                  Nuxt.js
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </form>
+    </CardContent>
+    <CardFooter class="flex justify-between">
+      <Button variant="outline">
+        Cancel
+      </Button>
+      <Button>Deploy</Button>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
index b135d28d..f20aecb5 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
@@ -11,7 +11,7 @@ const emits = defineEmits<AccordionRootEmits>()
 </script>
 
 <template>
-  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }" class="accordion">
     <slot />
   </AccordionRoot>
 </template>
diff --git a/package.json b/package.json
index 8c0452e0..c7de0ba7 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "scripts": {
     "dev": "pnpm --filter www dev",
     "build": "pnpm --filter www build",
+    "preview": "pnpm --filter www preview",
     "prepare": "pnpm simple-git-hooks",
     "lint": "eslint . --ignore-path .gitignore",
     "lint:fix": "eslint . --fix --ignore-path .gitignore"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c79918ff..c0aef666 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,9 @@ importers:
       '@vitejs/plugin-vue':
         specifier: ^4.1.0
         version: 4.1.0(vite@4.3.9)(vue@3.3.4)
+      '@vue/compiler-core':
+        specifier: ^3.3.4
+        version: 3.3.4
       autoprefixer:
         specifier: ^10.4.14
         version: 10.4.14(postcss@8.4.24)