Add vitepress-md-react-preview plugin for interactive UI component preview

.vitepress/config.mts

@@ -5,6 +5,11 @@ import { generateNav } from "./config/nav.js";
 import { generateAllSidebars } from "./config/sidebar.js";
 import { configureMarkdown } from "./config/markdown.js";
 import { generateSitemap } from "./config/sitemap.js";
+import { createMrpPlugin } from "@izumisy/vitepress-plugin-react-preview";
+
+const mrp = createMrpPlugin({
+  css: "@tailor-platform/app-shell/styles",
+});
 
 const docsDir = path.join(process.cwd(), "docs");
 
@@ -37,6 +42,7 @@ export default withMermaid(
       optimizeDeps: {
         include: ["mermaid"],
       },
+      plugins: [...mrp.vite()],
     },
 
     themeConfig: {
@@ -92,7 +98,10 @@ export default withMermaid(
     },
 
     markdown: {
-      config: configureMarkdown,
+      config(md) {
+        md.use(mrp.markdownIt);
+        configureMarkdown(md);
+      },
     },
   }),
 );

.vitepress/theme/index.ts

@@ -6,6 +6,7 @@ import GitHubIcon from "./components/icons/GitHubIcon.vue";
 import Tag from "./components/Tag.vue";
 import DeprecatedTag from "./components/DeprecatedTag.vue";
 import PreviewTag from "./components/PreviewTag.vue";
+import PreviewBlock from "@izumisy/vitepress-plugin-react-preview/PreviewBlock.vue";
 
 // Tailor brand theme styles (order matters!)
 import "./styles/vars.css"; // Brand colors & CSS variables (must be first)
@@ -30,6 +31,7 @@ const theme: Theme = {
     app.component("Tag", Tag);
     app.component("DeprecatedTag", DeprecatedTag);
     app.component("PreviewTag", PreviewTag);
+    app.component("PreviewBlock", PreviewBlock);
   },
   setup() {
     onMounted(() => {

docs/app-shell/components/button.md

@@ -7,18 +7,18 @@ description: Styled button with multiple variants and sizes
 
 The `Button` component is a styled button with multiple visual variants and sizes. It supports rendering as a custom element via the `render` prop (Base UI render pattern).
 
-## Import
+## Basic Usage
 
-```tsx
+```tsx preview wrap="row"
 import { Button } from "@tailor-platform/app-shell";
-```
 
-## Basic Usage
-
-```tsx
-<Button>Click me</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="destructive">Delete</Button>
+export default (
+  <>
+    <Button>Click me</Button>
+    <Button variant="outline">Outline</Button>
+    <Button variant="destructive">Delete</Button>
+  </>
+)
 ```
 
 ## Props

package.json

@@ -14,6 +14,8 @@
     "sync:app-shell": "npm --prefix scripts/docs-sync start -- app-shell"
   },
   "devDependencies": {
+    "@izumisy/vitepress-plugin-react-preview": "^0.3.0",
+    "@tailor-platform/app-shell": "^1.1.1",
     "@types/markdown-it": "^14.1.2",
     "@types/markdown-it-container": "^4.0.0",
     "@types/node": "^25.3.3",
@@ -22,6 +24,8 @@
     "mermaid": "11.15.0",
     "oxfmt": "0.44.0",
     "oxlint": "1.64.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx": "^3.1.1",
     "remark-parse": "^11.0.0",