Components Overview

Documentation.AI provides a rich library of components to create engaging, interactive documentation. All components work seamlessly in both web and code editors, giving you flexibility in how you author content.

What are components?

Components are reusable building blocks that enhance your markdown content with interactive features, better formatting, and structured information presentation. They range from simple formatting helpers to complex API documentation tools.

Component categories

Text & Formatting Components

Essential components for structuring and formatting your content:

• Headings and Text - Typography and text formatting options
• Lists and Tables - Structured data presentation
• Callouts - Highlighted information boxes with different styles
• Expandables - Collapsible content sections

Code & Technical Components

Specialized components for developer-focused content:

• Code Blocks - Syntax-highlighted code with copy functionality
• Code Groups - Tabbed interfaces for multi-language examples
• ParamField - API parameter documentation
• ResponseField - API response documentation

Media & Visual Components

Rich media and visual elements:

• Images - Optimized image display with responsive sizing
• Videos and Iframes - Embedded multimedia content

Interactive Components

Advanced interactive elements for enhanced user experience:

• Expandable Groups - Organized collapsible sections
• Tabs - Multi-panel content organization

Quick component reference

console.log("Hello World");

print("Hello World")

<Callout kind="info">Important information</Callout>

<CodeGroup tabs="JavaScript,Python">
```javascript
console.log("Hello World");
```

```python
print("Hello World")
```
</CodeGroup>

<Expandable title="Click to expand">
Hidden content here
</Expandable>

<ParamField path="id" param-type="string" required="true">
  Unique identifier for the resource
</ParamField>

Component selection guide

Choose components based on content type

<Callout kind="success">
  Welcome to ACME Company! 
</Callout>

<ExpandableGroup>
<Expandable title="What you'll learn">
- Core concepts
- Basic workflows  
- Best practices
</Expandable>
</ExpandableGroup>

Component best practices

Writing effective content

Do's:

• ✅ Use clear, descriptive titles for expandables and sections
• ✅ Provide context before showing code examples
• ✅ Include error handling in code samples
• ✅ Test all code examples before publishing
• ✅ Use consistent naming conventions

Don'ts:

• ❌ Nest components more than 3 levels deep
• ❌ Use technical jargon without explanation
• ❌ Create walls of text without visual breaks
• ❌ Skip alternative text for images
• ❌ Forget to update examples when APIs change

Accessibility considerations

All components are designed with accessibility in mind:

• Keyboard navigation - All interactive elements are keyboard accessible
• Screen reader support - Proper ARIA labels and semantic structure
• Color contrast - Meets WCAG 2.1 AA standards
• Focus management - Clear focus indicators and logical tab order
• Alternative text - Required for all images and media

Performance considerations

Optimizing component usage:

• Image optimization - Upload images through the editor for automatic optimization
• Code highlighting - Limited to 50 lines per block for best performance
• Lazy loading - Large expandable sections load content only when opened
• Caching - Component rendering is cached for faster page loads

Getting started with components

In the web editor

1. Type / commands to insert components quickly:

   • /callout - Insert a callout box
   • /code - Add a code block
   • /expandable - Create collapsible content
   • /image - Upload and insert images

2. Use the component toolbar - Click the + button to browse all available components

3. Drag and drop - Rearrange components visually in the editor

In code/MDX files

1. Import components are available automatically in all .mdx files
2. Use JSX syntax with component props as documented
3. Preview changes using your development server or git integration

Web Editor Workflow:
1. Click where you want to add a component
2. Type "/" to open component picker
3. Choose component from list or type name
4. Fill in component properties in the sidebar
5. Content appears instantly with live preview

Benefits:
- Visual editing with immediate feedback
- No syntax knowledge required
- Built-in property validation
- Drag-and-drop component organization

Code Editor Workflow:
1. Open your .mdx file in your preferred editor
2. Write JSX syntax for the component
3. Add properties as attributes
4. Preview using local development or git push
5. Leverage IDE features like autocomplete

Benefits:
- Full control over component properties
- Version control friendly
- Batch editing capabilities
- Advanced IDE features (find/replace, etc.)

What's next?

Explore specific component types:

• Text & Formatting - Master the basics of content formatting
• Code Examples - Learn advanced code presentation techniques
• Callouts & Alerts - Create attention-grabbing information boxes
• Images & Media - Add rich visual content
• Tables & Lists - Organize structured information
• Expandables & Tabs - Create interactive, organized content