Verdex - Documentation

Verdex provides a rich set of interactive components to enhance your documentation and make it more engaging for users.

Available Components

Code Block

Enhanced code blocks with syntax highlighting, line numbers, and copy functionality:

// Example usage
<CodeBlock language="javascript" showLineNumbers copyable>
  function greet() {
    console.log("Hello, world!");
  }
  
  greet();
</CodeBlock>

Interactive Tabs

Group related content in tabs for easier navigation:

// Example usage
<Tabs>
  <Tab label="React">
    // React implementation
  </Tab>
  <Tab label="Vue">
    // Vue implementation
  </Tab>
  <Tab label="Angular">
    // Angular implementation
  </Tab>
</Tabs>

Callouts

Highlight important information with styled callout boxes:

// Example usage
<Callout type="info" title="Note">
  This is an informational callout with important details.
</Callout>

<Callout type="warning" title="Warning">
  This is a warning callout to highlight potential issues.
</Callout>

<Callout type="error" title="Error">
  This is an error callout for critical information.
</Callout>

<Callout type="success" title="Success">
  This is a success callout for positive outcomes.
</Callout>

Interactive Diagrams

Create diagrams directly in your documentation:

// Example usage
<Diagram type="flow">
  A[Start] --> B{Decision}
  B -->|Yes| C[Process 1]
  B -->|No| D[Process 2]
  C --> E[End]
  D --> E
</Diagram>

API Reference

Document your APIs with a structured format:

// Example usage
<APIMethod
  method="GET"
  endpoint="/api/users"
  description="Retrieve a list of users"
  parameters={[
    { name: "page", type: "number", description: "Page number" },
    { name: "limit", type: "number", description: "Items per page" }
  ]}
  responses={[
    { code: 200, description: "Success", example: '{ "users": [] }' },
    { code: 401, description: "Unauthorized" }
  ]}
/>

Using Components

To use these components in your documentation:

Import the components in your MDX files:

import { CodeBlock, Tabs, Tab, Callout } from '@verdex/components';

Use them directly in your Markdown:

# My Documentation

This is regular Markdown content.

<Callout type="info">
  This is a component inside Markdown!
</Callout>

More Markdown content here...

Customization

All components can be customized to match your brand colors and styling. Check the Customization Guide for details.

Documentation Components