MDX Components Reference

This page demonstrates all available MDX components in the Appizer documentation system. Use this as a reference when creating new documentation pages.

TL;DR: **Quick Reference**: Appizer docs support Callout, Tabs, Steps, Cards, ApiEndpoint, TlDr, and DiagramWrapper components. All components are imported automatically in MDX files.

Callout Component

Display important information with different severity levels.

Callout Usage

jsx


<div class="callout callout-info my-4 rounded-r-md border-l-4 px-3 py-2.5 sm:px-4 sm:py-3">
  <div class="flex items-center gap-2 mb-1.5">
    <svg width="16" height="16" class="shrink-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1 1 1 0 100-2v-3a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
    <p class="font-medium text-sm">Optional Title</p>
  </div>
  <div class="text-sm text-slate-700 leading-relaxed">Your content here</div>
</div>

Types

Info Callout

Use for general information and helpful tips.

Success Callout

Use for successful operations or positive outcomes.

Warning Callout

Use for warnings and important notices that need attention.

Danger Callout

Use for critical warnings, breaking changes, or security issues.

Tip Callout

Use for best practices and helpful suggestions.

Note Callout

Use for additional context or side notes.

Tabs Component

Display content in multiple tabs (e.g., different programming languages).

Tabs Usage

jsx

<Tabs
  items={[
    {
      label: 'JavaScript',
      content: 'JavaScript content',
    },
    {
      label: 'Python',
      content: 'Python content',
    },
  ]}
/>

Example

<Tabs
items={[
{
label: 'JavaScript',
content: (
{`const appizer = new Appizer({
apiKey: process.env.APPIZER_API_KEY,
})

appizer.track({
event: 'page_view',
userId: 'user_123',
})}</CodeBlock> ), }, { label: 'Python', content: ( <CodeBlock language="python">{from appizer import Appizer

appizer = Appizer(
api_key=os.environ['APPIZER_API_KEY']
)

appizer.track(
event='page_view',
user_id='user_123'
)}</CodeBlock> ), }, { label: 'cURL', content: ( <CodeBlock language="bash">{curl -X POST https://api.appizer.com/v1/events/track \
-H "Authorization: Bearer $APPIZER_API_KEY" \
-H "Content-Type: application/json" \
-d '{"event":"page_view","userId":"user_123"}'`}
),
},
]}
/>

Steps Component

Display sequential instructions or processes.

Steps Usage

jsx

<ol class="docs-steps space-y-4 my-4 list-none">
  <li class="step"><span class="step-number"></span><div><strong>First Step</strong><div>Description of first step</div></div></li>
  <li class="step"><span class="step-number"></span><div><strong>Second Step</strong><div>Description of second step</div></div></li>
</ol>

Example

Install the SDK
Install Appizer SDK using your package manager: {`npm install @appizer/sdk`}
Initialize the Client
Create an Appizer client with your API key: {`const appizer = new Appizer({ apiKey: process.env.APPIZER_API_KEY, })`}
Track Your First Event
Start tracking user events: {`appizer.track({ event: 'user_signup', userId: 'user_123', properties: { plan: 'pro' }, })`}

Card & CardGrid Components

Display information in card layouts.

Card Usage

jsx

<div class="card-grid grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
  <Card 
    title="Card Title" 
    description="Card description"
    href="/link"
  />
</div>

Example

Two Column Layout

ApiEndpoint Component

Document API endpoints with parameters and responses.

ApiEndpoint Usage

jsx

<div class="api-endpoint border rounded p-3 my-3 bg-white"><div class="font-mono text-xs mb-1 text-emerald-700">API Endpoint</div>
  <ApiParam name="event" type="string" required>
    Event name to track
  </ApiParam>
  <ApiParam name="userId" type="string">
    User identifier
  </ApiParam>
  
  <ApiResponse status={200}>
    Event tracked successfully
  </ApiResponse>
</div>

Example

API Endpoint

The name of the event to track (e.g., "purchase_completed") Unique identifier for the user Custom properties associated with the event ISO 8601 timestamp (defaults to current time) {`{ "success": true, "eventId": "evt_abc123", "timestamp": "2024-01-15T10:30:00Z" }`} {`{ "error": "Bad Request", "message": "Event name is required" }`}

TlDr Component

Provide a quick summary at the top of long pages.

TlDr Usage

jsx

<div class="tldr my-4 p-3 bg-emerald-50/50 border border-emerald-200 rounded text-sm"><strong>TL;DR:</strong> Quick summary of the page content</div>

Example

TL;DR: **Quick Summary**: This page provides a complete reference of all MDX components available in Appizer documentation. Use these components to create rich, interactive documentation pages with callouts, tabs, steps, cards, API documentation, and diagrams.

DiagramWrapper Component

Wrap Mermaid diagrams with title, description, and related links.

DiagramWrapper Usage

jsx

<DiagramWrapper 
  title="Diagram Title"
  description="Diagram description"
  chart={`
    graph TD
      A --> B
  `}
  relatedLinks={[
    { label: 'Link 1', href: '/path' }
  ]}
/>

Example

<DiagramWrapper
title="Event Tracking Flow"
description="How events flow from your app to Appizer"
chart={`
sequenceDiagram
participant App
participant API
participant Queue
participant DB

text

  App->>API: POST /v1/events/track
  API->>Queue: Enqueue Event
  API-->>App: 202 Accepted
  Queue->>DB: Store Event
  DB-->>Queue: Confirmed

`}
relatedLinks={[
{ label: 'Event API', href: '/docs/api/endpoints/events' },
{ label: 'Best Practices', href: '/docs/guides/best-practices' }
]}
/>

Mermaid Diagrams

Create diagrams directly in MDX using Mermaid syntax.

Flowchart

mermaid

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
    
    style A fill:#e8f5e9,stroke:#388e3c
    style E fill:#e8f5e9,stroke:#388e3c
    style B fill:#fff3e0,stroke:#f57c00

Sequence Diagram

mermaid

sequenceDiagram
    participant Client
    participant API
    participant Database
    
    Client->>API: Request
    API->>Database: Query
    Database-->>API: Result
    API-->>Client: Response

State Diagram

mermaid

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Start
    Processing --> Success: Complete
    Processing --> Failed: Error
    Success --> [*]
    Failed --> Idle: Retry

Code Blocks

Standard Markdown code blocks with syntax highlighting.

JavaScript

javascript

// Track an event
appizer.track({
  event: 'purchase_completed',
  userId: 'user_123',
  properties: {
    amount: 99.99,
    currency: 'USD',
    items: ['item_1', 'item_2']
  }
})

TypeScript

typescript

interface EventProperties {
  amount: number
  currency: string
  items: string[]
}

const properties: EventProperties = {
  amount: 99.99,
  currency: 'USD',
  items: ['item_1', 'item_2']
}

Python

python

# Track an event
appizer.track(
    event='purchase_completed',
    user_id='user_123',
    properties={
        'amount': 99.99,
        'currency': 'USD',
        'items': ['item_1', 'item_2']
    }
)

JSON

json

{
  "event": "purchase_completed",
  "userId": "user_123",
  "properties": {
    "amount": 99.99,
    "currency": "USD",
    "items": ["item_1", "item_2"]
  }
}

Combining Components

You can combine multiple components for rich documentation.

Example: Complete API Documentation

TL;DR: The Events API allows you to track user actions and custom events for analytics and segmentation.

Authentication Required

All API requests require a valid API key in the Authorization header.

API Endpoint

Event name to track User identifier Event tracked successfully

Install SDK
{`npm install @appizer/sdk`}
Track Event
{`appizer.track({ event: 'page_view' })`}

Component Props Reference

Callout

Prop	Type	Required	Description
`type`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'tip' \| 'note'`	No	Callout type (default: 'info')
`title`	`string`	No	Optional title
`children`	`ReactNode`	Yes	Content

Tabs / Tab

Prop	Type	Required	Description
`label`	`string`	Yes	Tab label
`children`	`ReactNode`	Yes	Tab content

Steps / Step

Prop	Type	Required	Description
`title`	`string`	Yes	Step title
`children`	`ReactNode`	Yes	Step content

Card / CardGrid

Prop	Type	Required	Description
`cols`	`2 \| 3`	No	Number of columns (default: 3)
`title`	`string`	Yes	Card title
`description`	`string`	Yes	Card description
`href`	`string`	Yes	Link URL

ApiEndpoint

Prop	Type	Required	Description
`method`	`'GET' \| 'POST' \| 'PUT' \| 'DELETE' \| 'PATCH'`	Yes	HTTP method
`path`	`string`	Yes	API endpoint path
`description`	`string`	Yes	Endpoint description

ApiParam

Prop	Type	Required	Description
`name`	`string`	Yes	Parameter name
`type`	`string`	Yes	Parameter type
`required`	`boolean`	No	Is required
`children`	`ReactNode`	Yes	Description

ApiResponse

Prop	Type	Required	Description
`status`	`number`	Yes	HTTP status code
`children`	`ReactNode`	Yes	Response example

DiagramWrapper

Prop	Type	Required	Description
`title`	`string`	Yes	Diagram title
`description`	`string`	No	Diagram description
`chart`	`string`	Yes	Mermaid chart definition
`relatedLinks`	`Array<{label: string, href: string}>`	No	Related links

Accordion Component

Collapsible sections for FAQ-style content.

Accordion Usage

jsx

<div class="accordion border rounded my-3">
  <details class="border-b"><summary class="cursor-pointer p-3 font-medium">Question 1</summary><div class="p-3 pt-0">Answer to question 1</div></details>
  <AccordionItem title="Question 2" defaultOpen>
    Answer to question 2 (open by default)
  </AccordionItem>
</div>

Example

What is Appizer?

Appizer is an AI-powered analytics and re-engagement platform that helps you understand user behavior and automatically bring back disengaged users.

How does event tracking work?

Events are sent via our REST API or SDK. They're processed in real-time and stored for analytics queries. You can track any custom event with properties.

Yes! Appizer offers a generous free tier with up to 10,000 events per month and basic analytics features.

Badge Component

Inline labels for status, categories, or tags.

Badge Usage

jsx

<span class="inline px-2 py-0.5 text-xs rounded bg-gray-100 text-gray-700 align-middle">Default</span>
<span class="inline px-2 py-0.5 text-xs rounded bg-gray-100 text-gray-700 align-middle">Success</span>
<span class="inline px-2 py-0.5 text-xs rounded bg-gray-100 text-gray-700 align-middle">Warning</span>

Variants

Default Success Warning Danger Info Outline

Sizes

Small Medium

In Context

The POST endpoint accepts JSON payloads. Use Beta features with caution.

Kbd Component

Display keyboard shortcuts.

Kbd Usage

jsx

Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open search.

Example

Press ⌘ + K to open the command palette.

Copy with Ctrl + C and paste with Ctrl + V.

Use ↑ ↓ to navigate and Enter to select.

FileTree Component

Display file and folder structures.

FileTree Usage

jsx

<FileTree>
  <FileTreeItem name="src" type="folder" defaultOpen>
    <FileTreeItem name="components" type="folder">
      <FileTreeItem name="Button.tsx" highlight />
    </FileTreeItem>
    <FileTreeItem name="index.ts" />
  </FileTreeItem>
</FileTree>

Example

LinkCard Component

Enhanced navigation cards with icons.

LinkCard Usage

jsx

<LinkCardGrid cols={2}>
  <LinkCard 
    title="Getting Started"
    description="Quick introduction"
    href="/docs/get-started"
  />
</LinkCardGrid>

Example

Video Component

Embed videos in documentation.

Video Usage

jsx

<div class="video my-4"><iframe width="100%" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Demo Video" frameborder="0" allowfullscreen></iframe></div>

<Video 
  src="/videos/demo.mp4" 
  title="Product Demo"
  autoPlay
  loop
/>

Example (YouTube Embed)

YouTube videos can be embedded using just the video ID:

jsx

<div class="video my-4"><iframe width="100%" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="Video Title" frameborder="0" allowfullscreen></iframe></div>

Component Best Practices

Component Usage Tips

- Use **Callout** for important information that needs attention - Use **Tabs** for multi-language code examples - Use **Steps** for sequential instructions - Use **Cards** for navigation to related pages - Use **Accordion** for FAQ sections - Use **Badge** for status labels and tags - Use **Kbd** for keyboard shortcuts - Use **FileTree** for project structures