Claude-Code-Workflow/docs/.vitepress/demos

Demo Components

This directory contains React components that are embedded in the documentation as interactive demos.

Creating a New Demo

1. Create a new .tsx file in this directory (e.g., my-demo.tsx)
2. Export a default React component
3. Use it in markdown with :::demo my-demo :::

Demo Template

import React from 'react'

/**
 * Brief description of what this demo shows
 */
export default function MyDemo() {
  return (
    <div style={{ padding: '16px' }}>
      {/* Your demo content */}
    </div>
  )
}

Demo Guidelines

• Keep it simple: Demos should be focused and easy to understand
• Use inline styles: Avoid external dependencies for portability
• Add comments: Explain what the demo is showing
• Test interactions: Ensure buttons, inputs, etc. work correctly
• Handle state: Use React hooks (useState, useEffect) for interactive demos

Demo File Naming

• Use kebab-case: button-variants.tsx, card-basic.tsx
• Group by category:
  • ui/ - UI component demos
  • shared/ - Shared component demos
  • pages/ - Page-level demos

Using Props

If you need to pass custom props to a demo, use the extended markdown syntax:

:::demo my-demo
title: Custom Title
height: 300px
expandable: false
:::

Available Props

Prop	Type	Default	Description
name	string	-	Demo component name (required)
title	string	name	Custom demo title
height	string	'auto'	Container height
expandable	boolean	true	Allow expand/collapse
showCode	boolean	true	Show code tab