Gautam

MDX Components

Master all the powerful MDX components available in Dokly for creating rich, interactive documentation.

MDX Components#

One of Dokly's superpowers is the rich set of MDX components you can use to make your documentation more engaging and useful. Think of these as building blocks for creating amazing docs!

Callouts#

Callouts are perfect for highlighting important information, warnings, or helpful tips.

Types Available#

Info callouts are great for additional context or explanations that help readers understand better.

Warning callouts help you highlight potential issues or things readers should be careful about.

Danger callouts are for critical information that could cause problems if ignored.

Tip callouts are perfect for sharing helpful advice, best practices, or pro tips!

Usage#

MDX
<Callout type="info">
Your informational content goes here.
</Callout>

Tabs#

Tabs are fantastic for showing different options or versions of the same thing – like different programming languages or installation methods.

Bash
npm install dokly-sdk

Usage#

MDX
<Tabs defaultValue="option1">
<TabsList>
<TabsTrigger value="option1">Option 1</TabsTrigger>
<TabsTrigger value="option2">Option 2</TabsTrigger>
</TabsList>
<TabsContent value="option1">
Content for option 1
</TabsContent>
<TabsContent value="option2">
Content for option 2
</TabsContent>
</Tabs>

Steps#

Perfect for tutorials, setup guides, or any process that needs to be followed in order.

Create Your Project

Start by creating a new project in your Dokly dashboard. Give it a memorable name that reflects what you're documenting.

Write Your Content

Use the WYSIWYG editor to create your first page. Don't worry about making it perfect – you can always edit later!

Publish and Share

Once you're happy with your content, hit publish and share your documentation with the world.

Usage#

MDX
<Steps>
<Step title="First Step">
Description of what to do in the first step.
</Step>
<Step title="Second Step">
Description of what to do in the second step.
</Step>
</Steps>

Cards#

Cards are great for organizing related content, creating navigation sections, or highlighting key features.

Getting Started Guide

New to Dokly? Start here to learn the basics and create your first documentation site.

API Reference

Detailed documentation of all API endpoints, parameters, and response formats.

Examples Gallery

Check out real-world examples of beautiful documentation sites built with Dokly.

Community Support

Get help from our community or reach out to our support team directly.

Usage#

MDX
<CardGroup cols={2}>
<Card title="Card Title" href="/link">
Card description or content.
</Card>
<Card title="Another Card" href="/another-link">
More card content here.
</Card>
</CardGroup>

Code Blocks#

While not technically an MDX component, code blocks in Dokly are enhanced with beautiful syntax highlighting.

Python
def create_documentation():
    """Create amazing documentation with Dokly!"""
    project = dokly.create_project("My Awesome Docs")
    project.add_page("Welcome", content="# Hello World!")
    project.publish()
    return "Documentation created successfully! 🎉"

Supported Languages#

Dokly supports syntax highlighting for tons of languages including:

  • JavaScript/TypeScript
  • Python
  • Go
  • Rust
  • Java
  • C/C++
  • PHP
  • Ruby
  • And many more!

Best Practices#

Mix and match components to create engaging documentation. Don't be afraid to combine steps with code blocks, or use callouts within tabs!

Here are some tips for using components effectively:

  1. Use callouts sparingly – Too many can be overwhelming
  2. Keep steps focused – Each step should be a single, clear action
  3. Make tabs meaningful – Use them for genuinely different options
  4. Link cards thoughtfully – Make sure the destinations are relevant

Component Combinations#

You can nest and combine components for powerful results:

Start Simple

Begin with basic text and gradually add components as needed.

Don't try to use every component at once – start simple and build up!

Add Visual Interest

Once you're comfortable, try adding callouts or cards to make your content more engaging.