Template Instructions

• Replace id with your feature slug (e.g., "my-feature")
• Replace title and sidebar_label with your feature name
• Set sidebar_position to desired number

[Feature Name]

[One-sentence description of what this feature does]

Overview

[Detailed explanation of the feature, its purpose, and benefits]

Features

• [Feature 1]: [Description]
• [Feature 2]: [Description]
• [Feature 3]: [Description]

Use Cases

[Use Case 1]

[Description of when and why to use this feature]

[Use Case 2]

[Description of another common use case]

Installation

Prerequisites

• [Requirement 1]
• [Requirement 2]
• [Requirement 3]

Setup Steps

1. [Step 1 Title]

# Command or code example
npm install package-name

2. [Step 2 Title]

# Command or code example
npm run setup

3. [Step 3 Title]

[Instructions for configuration]

Usage

Basic Example

import ComponentName from '@site/src/theme/MDXComponents/ComponentName';

<ComponentName
  prop1="value1"
  prop2="value2"
>
  Content here
</ComponentName>

Advanced Example

import ComponentName from '@site/src/theme/MDXComponents/ComponentName';

<ComponentName
  prop1="value1"
  prop2="value2"
  advancedOption={true}
  customConfig={{
    option1: 'value',
    option2: true,
  }}
>
  More complex content with:
  - Lists
  - Code blocks
  - Multiple paragraphs
</ComponentName>

API Reference

Props

Prop	Type	Default	Required	Description
prop1	string	undefined	Yes	[Description]
prop2	string | number	'default'	No	[Description]
prop3	boolean	false	No	[Description]

Types

interface ComponentProps {
  prop1: string;
  prop2?: string | number;
  prop3?: boolean;
  children?: ReactNode;
}

Configuration

Options

<ComponentName
  option1="value1"
  option2={true}
  option3={{
    nested: 'config',
  }}
/>

Available Options

• option1: [Description of what this option does]
• option2: [Description of what this option does]
• option3: [Description of what this option does]

Examples

Example 1: [Basic Use Case]

import ComponentName from '@site/src/theme/MDXComponents/ComponentName';

<ComponentName type="info">
This is a basic example showing the simplest usage.
</ComponentName>

Result: [Describe what this produces]

Example 2: [Advanced Use Case]

import ComponentName from '@site/src/theme/MDXComponents/ComponentName';

<ComponentName
  type="warning"
  title="Custom Title"
  collapsible
  defaultCollapsed
>

### Complex Content

This example shows how to use:
- Markdown formatting
- Multiple sections
- **Bold** and *italic* text

</ComponentName>

Result: [Describe what this produces]

Example 3: [Real-World Use Case]

[Show a practical example from actual documentation]

Styling

CSS Classes

The component uses the following CSS classes:

• .componentClass - Main wrapper
• .componentHeader - Header section
• .componentContent - Content section

Customization

To customize the styling, create a custom CSS file:

/* Custom styling */
.componentClass {
  /* Your custom styles */
}

Dark Mode

The component automatically adapts to dark mode using Docusaurus theme variables.

Best Practices

Do ✅

• [Good practice 1]
• [Good practice 2]
• [Good practice 3]

Don't ❌

• [Bad practice to avoid 1]
• [Bad practice to avoid 2]
• [Bad practice to avoid 3]

Troubleshooting

Common Issues

Issue: [Problem description]

Cause: [Why this happens]

Solution: [How to fix it]

// Correct usage
<ComponentName prop="correct">Content</ComponentName>

---

Issue: [Another problem]

Cause: [Why this happens]

Solution: [How to fix it]

Related Features

[Add links to related features here]

Setup in New Repos

To add this feature to a new Docusaurus repository:

1. Copy component files:

cp -r docusaurus/src/theme/MDXComponents/ComponentName /path/to/new-repo/src/theme/MDXComponents/

2. Install dependencies (if any):

npm install package-name

3. Import and use:

import ComponentName from '@site/src/theme/MDXComponents/ComponentName';

<ComponentName>Your content</ComponentName>

Contributing

To improve this feature:

1. Edit the component in docusaurus/src/theme/MDXComponents/ComponentName/
2. Update this documentation
3. Add tests if applicable
4. Submit a pull request

Version History

Version	Date	Changes
1.0.0	YYYY-MM-DD	Initial release

---

Last Updated: [Date]
Maintained By: [Team/Person]
Status: [Stable|Beta|Experimental]