Dioxus Docs Kit

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

filename="main.rs"

use dioxus::prelude::*;

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

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

Code Groups

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

Tabs

Organize related content with tabs:

Install the package using your preferred package manager:

bash

cargo add dioxus

Steps

Steps provide sequential instructions:

First Step

Complete the first task in the sequence.

Second Step

Move on to the second task.

Final Step

Complete the final task to finish.

Accordions

Collapsible content sections:

Combining Components

You can combine components for rich documentation experiences:

Tip

The following example shows how to combine steps with code blocks.

Create Component

Define your Dioxus component:

rust

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

Use Component

Use it in your application:

rust

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