## Overview

This guide covers all the MDX components available for creating rich documentation.

## Callouts

Callouts are used to highlight important information:

> **Tip:** Tips provide helpful suggestions and best practices.

> **Note:** Notes contain additional information that may be useful.

> **Warning:** Warnings alert users to potential issues or important caveats.

> **Info:** Info boxes provide general informational content.

## Cards

Cards are great for navigation and feature highlights:

### Single Card

**Single Card Example**
Cards can contain rich content including text and links.

### Card Groups

**Feature One**
Description of the first feature.

**Feature Two**
Description of the second feature.

## Code Blocks

Code blocks support syntax highlighting:

### Single Language

```rust
fn main() {
    println!("Hello, Dioxus!");
}
```

### With Filename

```rust
use dioxus::prelude::*;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        div { "Hello, World!" }
    }
}
```

### Code Groups

```rust
fn greet(name: &str) {
    println!("Hello, {}!", name);
}
```

```typescript
function greet(name: string) {
    console.log(`Hello, ${name}!`);
}
```

```python
def greet(name: str):
    print(f"Hello, {name}!")
```

## Mermaid Diagrams

Fenced code blocks with the `mermaid` language are rendered as diagrams:

```mermaid
graph TD
    A[Write MDX] --> B[Build with Dioxus]
    B --> C{Deploy}
    C -->|Web| D[Static Site]
    C -->|Desktop| E[Native App]
    C -->|Mobile| F[Mobile App]
```

Sequence diagrams work too:

```mermaid
sequenceDiagram
    participant Browser
    participant Server
    Browser->>Server: GET /docs/page
    Server-->>Browser: HTML + WASM
    Browser->>Browser: Hydrate & render
```

## Tabs

Organize related content with tabs:

#### Installation
Install the package using your preferred package manager:

```bash
cargo add dioxus
```

#### Configuration
Configure your `Dioxus.toml` file:

```toml
[application]
    name = "my-app"
```

#### Usage
Import and use in your application:

```rust
use dioxus::prelude::*;
```

## Steps

Steps provide sequential instructions:

1. **First Step**
Complete the first task in the sequence.

2. **Second Step**
Move on to the second task.

3. **Final Step**
Complete the final task to finish.

## Accordions

Collapsible content sections:

### What is Dioxus?
Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust.

### Why use MDX?
MDX combines the simplicity of Markdown with the power of custom components, making documentation both easy to write and feature-rich.

### How does syntax highlighting work?
Code blocks are parsed and highlighted using syntect for accurate, language-aware syntax highlighting.

## Combining Components

You can combine components for rich documentation experiences:

> **Tip:** The following example shows how to combine steps with code blocks.

1. **Create Component**
Define your Dioxus component:

```rust
#[component]
    fn Button(label: String) -> Element {
        rsx! {
            button { class: "btn btn-primary", "{label}" }
        }
    }
```

2. **Use Component**
Use it in your application:

```rust
rsx! {
        Button { label: "Click me" }
    }
```